Label
Tags should always include a label. These can represent search terms, filters, or keywords.
Data Display
Tags
Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
Examples
Options
Avatar
Tags have the option to include an avatar in addition to the label. These should be used to represent entities.
Removable
Tags have the option to be removable or not. Removable tags have a small close (“×”) button.
Error
A tag can be marked as having an error to show that it has become invalid.
Disabled
A tag in a disabled state shows that a tag exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a tag may become available later.
Behaviors
Text Overflow
When the tag text is too long for the available horizontal space, it truncates. The full text should be revealed with a tooltip on hover.
Tag Group Overflow
When horizontal space is limited in a tag group, the individual tags wrap to form another line.
Implementation
Example Name
Description and implementation notes
<p> code example </p>Information
Checklist
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
All Color Schemes
Works properly across all color schemes (light, dark).
Accessible Contrast for Text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible Contrast for UI Components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Defined Options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Defined Behaviors
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing Guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization Guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard Interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design Tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI Kit
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.