Tag

Domain, classification or origin label.

finance orders

<mm-tag>finance</mm-tag>
<mm-tag variant="pii"></mm-tag>
<mm-tag variant="certified"></mm-tag>
<mm-tag variant="generated"></mm-tag>
<mm-tag removable>orders</mm-tag>

Guidance

Tags label an asset with a domain, classification or origin. They are plain by default: a compact chip on mm-sunken in mm-text-2. Colour appears only when the tag means something: pii (crimson, with a lock) and certified (moss, with a verified mark). generated and plugin mark content generated by a plugin or an agent as a small outlined sentence-case caption ("Generated"), with no sparkle.

Long tags truncate with an ellipsis; the full text stays in the accessibility tree and is offered as a native title only when it is actually cut off. With removable, the tag gets a remove button named "Remove <tag>" that fires mm-remove on click, Enter, Space, Delete or Backspace; the tag does not remove itself, so move focus to a sensible neighbour when you remove it. With href, the tag text is a link.

Properties

Property	Attribute	Type	Default	Description
variant	variant	TagVariant	'plain'	plain (default), pii, certified, generated or plugin.
removable	removable	boolean	false	Shows a remove button that fires mm-remove.
href	href	string	''	Makes the tag text a link, e.g. to the tag's Discover facet.
text		string

Events

Event	Detail	Description
mm-remove	CustomEvent<{ value: string }>	The remove button was activated. Cancelable; the tag never removes itself.

Slots

Slot	Description
Default	The tag text. Defaults to the variant word for pii, certified, generated and plugin.

CSS parts

Part	Description
tag	The chip.
label	The text, or the link when href is set.
icon	The variant icon.
remove	The remove button.

CSS custom properties

Property	Description
--mm-tag-max-width	Width at which the text truncates. Defaults to 24ch.

Examples

Every state of mm-tag in Storybook, with keyboard and screen reader tests.