Accessibility

For designers

Tags are built to be accessible and meet WCAG 2.1 AA standards.

• Font size: 12px Book. As the label forms part of a UI component, it qualifies under the 3:1 contrast ratio minimum.
• Colour contrast: All background, text and border combinations meet or exceed required contrast thresholds.
• Icons: Decorative by default (aria-hidden). Should not duplicate the meaning of the label. If meaningful, must include semantic labelling.
• Links: Must be focusable and keyboard navigable. Clearly styled and distinguishable from the tag text. Should include descriptive text for screen readers.
• Motion: Tags use no animation or flashing and do not introduce visual noise.

For developers

Icons

Mark decorative icons with aria-hidden="true" (already shown in the examples).

Dismissible tags

If a tag is dismissible (via a close button), ensure the button has an accessible label, for example aria-label="Remove tag".

Color is not enough

Never rely on color alone for status tags — pair the scheme (is-error, is-info, is-success) with text or an icon so the meaning is accessible.

Content / Copy guidelines

Tags should use short, descriptive and consistent labels. The tone should be neutral, informative, and suitable for metadata or UI contexts.

• Text: Mandatory. One to three short words (e.g. “Hybrid”, “Low stock”, “Special edition”).
• Capitalisation: Sentence case (e.g. “In progress”).
• Max length: Aim for 18 characters or fewer to ensure layout stability.
• Icons: Optional. Should visually support the text meaning, not repeat it.
• Links: Optional. Must use clear, concise language (e.g. “Edit”, not “Click here”).
• Do not use emojis or punctuation in Tag labels.
• Avoid using verbs in the main label unless combined with a link.