> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/tag.md).
# 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.
## Overview
Tags are interactive elements that help users organize or manage content within an interface, often used for filtering or categorizing data.
{% embed url="" %}
## When to use
* 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.
## When not to use
* 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.
## Types
## Anatomy
1. **Icon Leading:** An optional visual element at the beginning of the tag, typically used to indicate the type or category of the tag.
2. **Container:** The main visual element that encloses the tag, defining its shape and color.
3. Text Label: The primary text that identifies the tag, representing the category or status.
4. **Count:** An optional count that can be displayed within or next to the tag to indicate the number of items related to it.
5. **Dismiss Icon:** A clickable element that allows the user to remove the tag, usually represented by an “X” or similar symbol.
6. **Icon Trailing:** An optional icon at the end of the tag, often used to denote additional interaction or secondary functionality.
## Color Options
## Style
## State
## Size
| Size | Title (px) | Icon (px) | Count (px) | Container Height (px) |
| ------ | ---------- | --------- | ---------- | --------------------- |
| 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 |
## Accessibility
* **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.
## Example
* **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.
