Tag
Description
The Tag component is used to display keywords or labels that function as interactive filters within an interface.
Tags look similar to our badges, but have a rounded side on the right to indicate their button like interactiveness. Unlike the badge component, which is static, tags are clickable and allow users to interact by selecting specific tags to filter content.
Tags are used in contexts where a clear connection to label exists and simple filtering is feasible.
Usage
- Semantic element: Use a
<button>element to ensure keyboard and screen reader accessibility. There might be exception where you could use an<a>element. - Focus indicator: Ensure the tag has a visible focus indicator to meet WCAG standards, making it easy for keyboard users to locate the tag.
- State indicator: A tag should show the common interaction states like hover and active.
- Color usage: In general tags are in Gainsboro. Their might be scenarios, where our semantic colors make sense, but to not compete with our buttons, strictly avoid red.
Example
Our filter-chip, used for our filters is very similar to our tag.