Tag
Overview
Tags are interactive elements that help users find and organize content by categorizing it with keywords or labels.
Tags allow users to identify a label or category for an item. They can be used to represent things like a filter, severity level, or grouping.
Other names: Tag, Label, Chip, Badge, Pill
Behaviors
Focus
The tag’s border color changes on focus.
Remove
Tags can be configured to be removed. This appears as a small remove “X” icon that has a hover state and tooltip, like the text field clear icon. Selecting this icon removes the tag.
Variations
Default (standard)
Known as chips in Kendo. A standard tag that can be configured to be removed.
System generated
System generated tags cannot be added or removed by users.
User generated
User generated tags are custom tags that users create.
Severity
Severity tags have a colored background and border that follows the severity guidelines. Severity tags function the same as default tags.
Filter
Filter tags are like label/value pairs. There is a label followed by a colon, and then the pair followed by a down arrow. Users select their option from the drop-down list and the filter responds. Filter tags also have a remove icon. (These are currently only used in data tables/grids.)
Counter
Counter tags are clickable. Once clicked, a list of hidden tags appear in a popover.
Usage guidelines
General
Use tags when grouping, sorting or labeling information.
Content guidelines
Tag labels are typically short, 1-2 words. If more description is needed and the tag is longer, use sentence case. Icons can be paired with a tag label and should be arranged to the left of the text.
Icons
Icons can be paired with a tag label and should be arranged to the left of the text.
Accessibility
A tag’s meaning should not be communicated by color alone. Support the meaning of a tag with appropriate text. This helps users who cannot see color, or who are using assistive technology.
Color contrast ratios should pass the standards for WCAG AA 2.1 compliance.
Related
Referenced in this section:
Components and patterns that use Tags:
Updated 8 days ago