# Tag

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FzYn7ubwzB32Ck0kQF4o9%2FFrame%2045.png?alt=media&#x26;token=c2e66078-759d-4954-adc7-0b5c358a9329" alt=""><figcaption></figcaption></figure>

## Overview

Tags are interactive elements that help users organize or manage content within an interface, often used for filtering or categorizing data.

{% embed url="<https://www.figma.com/design/4NwKhd4dwRhRF5Zpiooi69/Components?node-id=2-245617&t=0Thv0LIO2gFzE3eo-4>" %}

## When to use

* Use tags to categorize items in lists or grids, making it easier for users to filter and sort through content.&#x20;
* Tags can visually represent the status of an item, such as “New,” “In Progress,” or “Completed,” to give users quick context.&#x20;
* When users need to filter or refine search results, tags serve as intuitive interactive components for toggling categories or attributes.&#x20;
* Use tags to draw attention to key characteristics or special attributes of an item, such as "Popular" or "Limited Edition."&#x20;
* 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.&#x20;
* Tags may not be suitable when the user needs to apply multiple or complex filters, where dropdowns or checkboxes would work better.&#x20;
* Avoid using tags for lengthy content or sentences. Tags are ideal for concise, short labels or statuses.

## Types

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FCL6HWOaZqY49px8zIFuM%2Fvariant.png?alt=media&#x26;token=29813a32-27a0-4f33-be8c-38c5afe14435" alt=""><figcaption></figcaption></figure>

## 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.&#x20;
2. **Container:** The main visual element that encloses the tag, defining its shape and color.&#x20;
3. Text Label: The primary text that identifies the tag, representing the category or status.&#x20;
4. **Count:** An optional count that can be displayed within or next to the tag to indicate the number of items related to it.&#x20;
5. **Dismiss Icon:** A clickable element that allows the user to remove the tag, usually represented by an “X” or similar symbol.&#x20;
6. **Icon Trailing:** An optional icon at the end of the tag, often used to denote additional interaction or secondary functionality.

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2Fib2APGP7wybLqMnsoS0y%2Fanatomy.png?alt=media&#x26;token=eaa8b7a0-dc84-4130-8fc1-214c73060cf1" alt=""><figcaption></figcaption></figure>

## Color Options

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FSbP90XvhTNx9B0WgPNUB%2Fcolor%20options.png?alt=media&#x26;token=6d4c492a-cafe-44ba-87ca-3105bb690d76" alt=""><figcaption></figcaption></figure>

## Style

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2F5lvgRgXuZagWrGRT1nTb%2Fstyle.png?alt=media&#x26;token=cde8da21-8c0c-42ab-af37-71b027713130" alt=""><figcaption></figcaption></figure>

## State

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FzsynxtHBzqsrtjQyJFK8%2Fstate.png?alt=media&#x26;token=e0f6ec62-e885-4028-86d7-6db9ce0cdcb2" alt=""><figcaption></figcaption></figure>

## Size

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FM3b6oROGEOTqEnhjnP08%2Fsize.png?alt=media&#x26;token=38aaab6f-4c0d-47d8-860b-21e8008ba512" alt=""><figcaption></figcaption></figure>

| 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.&#x20;
* **Clear Focus Indicators:** Provide a visible focus state when tags are navigated via keyboard to improve accessibility for visually impaired users.&#x20;
* **Screen Reader Compatibility:** All tags should be properly labeled, providing clear information about their purpose and state for screen readers.&#x20;
* **Touch-Friendly Design:** Ensure that tags are large enough for touch input, especially on mobile devices, to improve usability for all users.&#x20;
* **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.&#x20;
* **Status Labels:** Tags display item statuses in a project management app, showing states like “Pending” or “Completed.”&#x20;
* **User-Selected Interests:** In a profile settings page, users can select tags representing their interests, which can be saved as their preferences.&#x20;
* **Content Organization:** In blog or news articles, tags are used to group related content under themes like “Technology” or “Health.”&#x20;
* **Multi-select in Forms:** Tags represent selected options in a form, showing the categories or features chosen by the user.
