Tag categorizes and organizes system-generated metadata for users.
Overview
Tags can be used individually or as a group to represent categories or keywords.
Anatomy
- Label: Describes the primary attribute of the metadata.
- Container: Wrapper for the label.
- Remove action (optional): A close icon can be included to remove the tag.
Demo
Open the component in Figma.
When to use
Use a tag for these scenarios:
- When one object can be mapped to multiple categories or keywords.
- To display the parameters of filtered data.
When not to use
Use another type of system-generated indicator to display status, indicate items need attention, or report item counts.
Use status instead:
- To display the status of an object.
Use badge instead:
- To report item counts.
- To indicate that there are items that are new to the user or need their attention.
Similar components
Behaviors
Interactivity
Tags are static by default. They can be made interactive if needed.
- Clickable tags can be clicked to execute a function. These tags have hover and focus states.
- Removable tags can be removed from an object and have an affordance to remove them.
- Disabled tags can't be interacted with or removed.
Tag lists
Automatically assembles a group of tags with appropriate spacing between tags.
Tag lists overflow
Automatically wraps tags to additional lines when there are more tags than can fit horizontally in a container.
Accessibility
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.
Content guidelines
Tags are derived from metadata coming from an API. They exist on the backend and are generally not editable. If a design has unique tag needs, work with your engineers to explore tag creation.
Content accessibility
Label
- The accessibility label for a tag ideally matches the visible text label.
- If the tag is removable, it’s automatically given a label using aria-label so that screen reader users can distinguish which tag will be removed. The default label is: Remove {tag label}
Color
- Color shouldn't be used as the only means to differentiate tag categories.
- Available colors are determined by our color tokens.