Tag
Tags are used to label, categorize, or organize content within an interface. They provide a visual cue to help users quickly understand the context or category of an item.
Last updated
Tags are used to label, categorize, or organize content within an interface. They provide a visual cue to help users quickly understand the context or category of an item.
Last updated
Tags are interactive elements that help users organize or manage content within an interface, often used for filtering or categorizing data.
Use tags to categorize items in lists or grids, making it easier for users to filter and sort through content.
Tags can visually represent the status of an item, such as “New,” “In Progress,” or “Completed,” to give users quick context.
When users need to filter or refine search results, tags serve as intuitive interactive components for toggling categories or attributes.
Use tags to draw attention to key characteristics or special attributes of an item, such as "Popular" or "Limited Edition."
In forms or settings, use tags to represent selected options, such as user-chosen categories or interests.
Avoid using tags when the information is static or does not need user interaction, badges are better suited for displaying non-interactive statuses.
Tags may not be suitable when the user needs to apply multiple or complex filters, where dropdowns or checkboxes would work better.
Avoid using tags for lengthy content or sentences. Tags are ideal for concise, short labels or statuses.
Icon Leading: An optional visual element at the beginning of the tag, typically used to indicate the type or category of the tag.
Container: The main visual element that encloses the tag, defining its shape and color.
Text Label: The primary text that identifies the tag, representing the category or status.
Count: An optional count that can be displayed within or next to the tag to indicate the number of items related to it.
Dismiss Icon: A clickable element that allows the user to remove the tag, usually represented by an “X” or similar symbol.
Icon Trailing: An optional icon at the end of the tag, often used to denote additional interaction or secondary functionality.
xSmall
12
16
12
18
Small
12
16
14
24
Medium
14
20
14
28
Large
16
20
16
32
xLarge
16
24
16
40
Keyboard Navigation: Ensure that tags can be focused and navigated using the keyboard for users with mobility impairments.
Clear Focus Indicators: Provide a visible focus state when tags are navigated via keyboard to improve accessibility for visually impaired users.
Screen Reader Compatibility: All tags should be properly labeled, providing clear information about their purpose and state for screen readers.
Touch-Friendly Design: Ensure that tags are large enough for touch input, especially on mobile devices, to improve usability for all users.
Avoid Using Only Color for Status: To ensure accessibility, use icons or text along with color to differentiate tag statuses, so colorblind users can also understand their meaning.
Filtering Search Results: Tags allow users to refine their search results by category, such as selecting tags like “Electronics” or “Books” in an e-commerce application.
Status Labels: Tags display item statuses in a project management app, showing states like “Pending” or “Completed.”
User-Selected Interests: In a profile settings page, users can select tags representing their interests, which can be saved as their preferences.
Content Organization: In blog or news articles, tags are used to group related content under themes like “Technology” or “Health.”
Multi-select in Forms: Tags represent selected options in a form, showing the categories or features chosen by the user.
