Tag

Set variant to filled, outlined or solid to choose how much paint a tag uses.

Set color to default, primary, success, warning, error or info, and each works with every variant.

Set color to a preset palette, such as blue, purple or gold.

Set color to any CSS color, and variant picks its tint, outline or solid fill.

Set shape to round for a pill, or leave the default corners.

Set size to small for a shorter tag with smaller text, for dense metadata.

Set emphasis to subtle for a neutral fill that keeps the colored text.

Pass an icon role to draw a glyph before the label, in the label's color.

Pass an icon with no label and an aria-label that names it for a square tag, which draws no status dot.

Set status to success, processing, warning, error or default to draw a dot before the label.

Set statusColor to a color family, a preset palette name or a #rrggbb hex (which keeps its value in dark mode) to paint the dot alone.

Pass an image URL as avatar to show a small picture at the start of the tag.

Pass href to make the tag a link, in Outlook for Windows too.

Set disabled for the disabled fill, text and border, and a tag that is never a link.