Tag
Last Updated: September 2026Tags are non-interactive, purely informational visual cues that expose traits of some entity. They support prefixes as well as color variants for added layers of information communication.
Source CodeAnatomy
link- 1Small
- 2Small
- 3Medium
- 4Medium
Variants
linkColors
Thirteen palette colors from cyan through teal.
With icon
Optional leading icon reinforces meaning.
Sizes
linkTags support 3 sizes: XS, S, and M.
Usage Guidelines
linkWhen to use
- •To label categories, filters, or metadata in a compact chip.
- •For semantic tones (success, danger) via color choices like green/red.
- •In tables, cards, and score trends where space is limited.
When not to use
- •For interactive toggles — use Toggle Button or a filter control.
- •For process status dots — use DotStatus.
- •For multi-step progress — use Stepper.
Keep labels short and categorical (1–2 words).
Don't put sentences or unique IDs in tags.
Match color to meaning (green success, red denied, orange caution).
Don't use calming colors for negative outcomes.
Behaviors
linkSizing
- •size: xs | sm | md (default md).
- •xs is text-toned without a subtle fill; sm/md use subtle background fills.
Icons
- •Pass icon with a Material Symbol name.
- •Icon size is fixed in the component — keep labels short so the chip stays compact.
Content Guidelines
linkLabels
- •Sentence case ('In network', not 'IN NETWORK').
- •Prefer nouns or short adjectives over verbs.
- •Synthetic categories only — never real MRNs or patient names.
Accessibility
linkText & Labels
- •Label is required visible text — don't rely on icon alone.
- •Color must not be the only means of conveying meaning.
ARIA attributes
- •Renders a span — add aria attributes only if the tag conveys critical status without surrounding context.
Keyboard Support
- •Tag is not interactive and is not in the tab order.
WCAG Compliance Standards
FAQs
linkIs Tag clickable?
No — Tag is a presentational span. Use a button or filter control for interaction.
When should I use xs?
When you need a minimal, fill-less label that still carries the color tone — denser metadata rows.
Which colors are available?
cyan, blue, indigo, violet, purple, magenta, slate, neutral, red, orange, yellow, green, teal.