---
title: Tag
navTitle: Tag
summaryParagraph: |
  Tags helps users quickly recognize important information about items that organize and categorize them. They visually label items with small amounts of information or the item’s status, usually with keywords that help organize and categorize the items. They may be persistent or dismissible. Dismissible tags can be added or removed by users.
tags: ['Badge', 'Pill', 'Chip', 'Label', 'Lozenge', 'Input tag']
needToKnow:
  - Tags help categorize and organize
  - Use sentiment labels only for sentiment or other employee feedback data
demoStoryId: tag-react--default-medium-kaizen-site-demo
---

## Visuals

### UI Kit

<iframe style="border: none;" width="744" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe3TyAOZKfLg9cA01Iy1Mgm%2FKaizen-Site-embed%3Fnode-id%3D1412%253A930" allowfullscreen></iframe>

## When to use

Use when you have data that helps categorize and organize things.


## When not to use

Do not use tags for numerical counts. Use a [badge](/components/badge) instead.


## Options

**Modes**

*   Persistent
*   Dismissible
*   Optional: Link

**Types**

*   Default
*   Sentiment: Positive, Neutral, Negative
*   Status: Live, Draft, Closed, Action
*   Validation: Positive, Informative, Negative, Cautionary

## To keep in mind

*   Use **default** tags to label items
*   Use **sentiment** **tags only for sentiment** or other employee feedback data
*   Use **validation tags** for indicating the validation state such as the Cautionary style for cautioning users that the item has a validation warning that could be addressed.
*   Use **status** **tags** to show the status of surveys, reports, action plans, and performance feedback.
*   When a user can remove tags, use **dismissible tags.**
*   When a user can add tags, use **dismissible tags** with a Secondary Action Button to “Add” tags.
*   The tag label is an **adjective or noun**, not a verb.
*   Sizes:
    *   Use **small** tags when they’re inline with other text
    *   Use **medium** tags in rows with a single item displayed next to the tag
*   **Link tags** let you provide a link to somewhere or to filter content by that tag.
    *   Link tags have hover and focus styles that default tags do not.
    *   When used as a filter tag, link tags instantly filter content on click.
*   Long labels or user-generated content:
    *   Tags ideally use very short labels (1 word only). If we need tags for user-generated content, however, that might lead to long labels. In that case, we have an opt in option for “truncate text” which kicks in when the container constrains the Tag to a size where the text no longer fits. If the full label is NOT visible elsewhere in the UI, then the Tag also needs a Tooltip on hover/focus to show the full label.

## See also

* [Badge](/components/badge).


## External links

Here are some examples of existing design system tags:

- [Ant Design: tag](https://ant.design/components/tag/).
- [Polaris: tag](https://polaris.shopify.com/components/forms/tag#navigation).
- [Lightning: pills](https://www.lightningdesignsystem.com/components/pills/).
- [Atlassian: tag](https://atlassian.design/guidelines/product/components/tags).
- [Atlassian: lozenges](https://atlassian.design/guidelines/product/components/lozenges).
- [Semantic UI: label](https://semantic-ui.com/elements/label.html).