<h2>What’s new in v3</h2>
<ul>
<li><strong>Dismissible tags:</strong> Should always use the neutral color to maintain visual consistency and avoid unintended semantic meaning. The dismiss button appears as a ghost button in the neutral color.</li>
<li><strong>Interaction update:</strong> Tags are either navigable or dismissible. They can’t perform both functions simultaneously.</li>
<li><strong>Colors:</strong> Palette simplified to brand, neutral, and semantic colors to make usage clearer. Additional colors can be added through tokens without detaching the component.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Tag highlights key information and helps users quickly identify, categorize, or filter content.</p>
<p>Use tags to:</p>
<ul>
<li>Label items with statuses, categories, or attributes.</li>
<li>Help users scan and find relevant content more efficiently, providing visual cues.</li>
<li>Support filtering or selection when tags are interactive.</li>
</ul>
<p>Tags and badges are visually similar, but they serve different purposes: tags are interactive, while badges are not.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Tag</td>
<td>Use tags to help users categorize content or refine results. Tags provide quick access to related pages (navigable tags) or show active filters that users can remove (dismissible tags).</td>
</tr>
<tr>
<td><a href="/components/badge/">Badge</a></td>
<td>Use badges as read‑only indicators or labels. Badges can appear individually or in groups and convey meaning through color and text.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Tags consist of up to four elements. The tag container and tag label are required. The leading icon and dismiss icon are optional.</p>
<details data-name='image-block' data-images='[{"alt":"The parts of a tag, labeled 1 through 4.","caption":"The tag component contains four elements:\n\n1. Tag container: main element that holds the label and icons.\n2. Leading icon (optional): adds meaning or helps with quick recognition.\n3. Tag label: short, descriptive text that identifies the tag.\n4. Dismiss icon (optional): Removes the tag. Appears only on dismissible tags.","url":"https://dds.dell.com/site/v3/components/tag/tag-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"","path":"","type":"Internal","ariaLabel":""},"title":"Helpful filter categories and values","subtitle":"Read the Nielsen Norman Group&#39;s article on filter categories."}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Using tags as part of a search or filtering strategy can only be supported if the product or application has an established taxonomy and data architecture. For the best experience, follow the [filter pattern guidelines](/patterns/filter/). Strike a balance between generalization and specification when implementing them in design or development.

### Categorization (navigable tags)

Use navigable tags to represent topics, categories, or related content. They function like links and help users explore similar items or move to a related page. 

Examples:

* Showing product categories on a product detail page
* Linking to related articles or topics
* Highlighting themes such as “Security,” “Cloud,” or “Analytics”

<details data-name='image-block' data-images='[{"alt":"","caption":"\nExample of tags used for categorization.","url":"https://dds.dell.com/site/v3/components/tag/tag-usage-categorization.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Faceted search filters (dismissible tags)

Use dismissible tags to represent active filters that users can remove. These tags help users understand which criteria are currently applied and allow them to quickly clear or adjust them. 

Examples:

* Showing selected attributes in a product search: “16 GB,” “SSD,” “Blue”
* Displaying applied filters in dashboards or data views
* Indicating user-selected constraints like “In-stock only” or “On sale”

<details data-name='image-block' data-images='[{"alt":"Example of a filtered product results page. Tags each have a dismiss icon and read, \"64 GB\", \"32 GB\", \"2 TB or more\", and \"16 GB\".","caption":"\nExample of tags used as faceted search filters.","url":"https://dds.dell.com/site/v3/components/tag/tag-usage-faceted-search-filters.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

### Options

Tags can include two optional elements: a **leading icon** or a **dismiss icon**, depending on the tag’s behavior.  A text label is required for all tags.

* **Leading icon:** Any icon from DDS library that adds meaning or supports quick recognition. It can be used with both, navigable and dismissible tags.
* **Dismiss icon:** Appears only on dismissible tags, allowing users to remove the tag. Navigable tags do not support dismissal.

<details data-name='image-block' data-images='[{"alt":"A large tag with label, \"Tag label.\"","caption":"**With label**: the default tag has a text label. Text labels are required and should briefly and clearly communicate their purpose to the user.","url":"https://dds.dell.com/site/v3/components/tag/tag-kinds-label.png"},{"alt":"A large tag with icon and label, \"Tag label.\"","caption":"**With leading icon and label**: an optional icon can be displayed to the left of the tag label. It will be displayed in the same color as the text. Icons cannot be the only content inside of a tag.","url":"https://dds.dell.com/site/v3/components/tag/tag-kinds-label-icon.png"},{"alt":"A large tag with dismiss function and label, \"Tag label.\"","caption":"**With dismiss icon and label**: for dismissible tags, a close icon is displayed to the right of the label. The dismiss function (close button) is a separate interaction from the base tag to allow accessible users to tab through the content.","url":"https://dds.dell.com/site/v3/components/tag/tag-kinds-label-dismiss.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

## Sizes

Tags come in three sizes: **large**, **medium**, and **small**.

When multiple tags appear together, use the same size for consistency. Choose the appropriate size based on the device, layout density, and the size of nearby components.

<details data-name='image-block' data-images='[{"alt":"Large tag","caption":"","url":"https://dds.dell.com/site/v3/components/tag/tag-sizes-large.png"},{"alt":"Medium tag","caption":"","url":"https://dds.dell.com/site/v3/components/tag/tag-sizes-medium.png"},{"alt":"Small tag","caption":"","url":"https://dds.dell.com/site/v3/components/tag/tag-sizes-small.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

| Size   | Description                                                                                                                                  |
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Large  | Large tags are 40-pixels high. Large tags are ideal for use with large size input fields.                                                    |
| Medium | Medium tags are 32-pixels high.                                                                                                              |
| Small  | Small tags are 24-pixels high. Use small tags in compact areas. This size is ideal for use in tables or conjunction with small input fields. |

## Layout

### Specifications

Tag groups are typically left‑aligned and use consistent spacing based on tag size. Spacing should follow the 4‑pixel grid whenever possible. The same spacing value can be used horizontally and vertically, especially when the container is narrow and tags need to wrap.

**Recommended spacing between tags:**

* Large tags: 12 px
* Medium tags: 12 px
* Small tags: 8 px

**Leading‑icon internal spacing:**

* Large and medium tags: 12 px from the component edge, 8 px from the label
* Small tags: 8 px from the component edge, 4 px from the label

Spacing may be adjusted if a different value better supports the layout.

<details data-name='image-block' data-images='[{"alt":"Group of large tags with a 12-pixel margin.","caption":"Groups of large-sized tags include a 12-pixel margin between tags. If the tag contains a leading icon, it will be 12-pixels from the component edge and 8-pixels from the label.","url":"https://dds.dell.com/site/v3/components/tag/tag-layout-spacing-large.png"},{"alt":"Group of medium tags with a 12-pixel margin.","caption":"Groups of medium-sized tags include a 12-pixel margin between tags. If the tag contains a leading icon, it will be 12-pixels from the component edge and 8-pixels from the label.","url":"https://dds.dell.com/site/v3/components/tag/tag-layout-spacing-medium.png"},{"alt":"Group of small tags with an 8-pixel margin.","caption":"Groups of small-sized tags include an 8-pixel margin between tags. If the tag contains a leading icon, it will be 8-pixels from the component edge and 4-pixels from the label.","url":"https://dds.dell.com/site/v3/components/tag/tag-layout-spacing-small.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

## Interaction

### Behavior and states

Tags use five interactive states: **rest**, **hover**, **press**, **inactive**, and **focus**.  Each state adjusts color or saturation to help users identify the tag’s current condition.

When a dismiss icon is present, the tag body and dismiss button respond to states independently to support accessibility and prevent accidental actions.

<details data-name='image-block' data-images='[{"alt":"A subset of dismissible tags in their respective states.","caption":"Tags change color and saturation depending on their state. The base tag and the close button are two separate interactions.","url":"https://dds.dell.com/site/v3/components/tag/tag-behavior.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Color

### Light mode

There aren’t strict rules for choosing a tag color. Designers can link colors to products, categories, or user personas as needed. Stay consistent and use the same color for the same category, as using too many different colors can increase cognitive load for some users.

The dismiss icon always uses the neutral ghost-button style, no matter which tag color is applied.

<details data-name='image-block' data-images='[{"alt":"A subset of colorful tags in their respective states.","caption":"Tags will increase or decrease in color saturation during hover and pressed states. The focus state will display an outline.","url":"https://dds.dell.com/site/v3/components/tag/tag-colors.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Standards

### Accessibility

**Tags should not rely on color to communicate meaning**

While tags can use colors to help differentiate them from each other, they should not use color specifically to communicate meaning. While a tag’s meaning can be reinforced using an accompanying icon, its meaning must be visually self-evident and the icon commonly used in that context, such as an error alert, check, or copy icon.

WCAG 2.2: [1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)<br></br>

**Ensure tags have appropriate contrast against the surrounding background**

Tags should meet 3:1 minimum contrast against the page (surrounding) background. This is especially important for dismissible tags, which are considered active user interface components and are required to meet this level by accessibility guidelines.

WCAG 2.2: [1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)<br></br>

**Avoid using icons that could be confused for additional UI elements**

If using [icons](/foundations/icons/) alongside tag text, avoid ones that could be mistaken for user interface elements, such as DDS’ close-x (resembling an X) or plus-add (resembling a plus symbol). If in doubt, make sure to test with users first, and include participants with a range of abilities and experiences.<br></br>

**Use gray tag variants with care, particularly with dismissible tags**

Unlike badges, tags are an active user interface component. Consequently, gray variants should be avoided where possible so as to minimize user confusion regarding whether or not a tag is disabled.

### Content

**Capitalization and case**\
Write tag labels in sentence case. This means that only the first letter of the first word is capitalized.<br></br>\
**Punctuation**\
Don’t include punctuation in tag text other than a hyphen to separate words.<br></br>\
**Tag labels**\
Tag text should clearly explain the topic of the tag while avoiding ambiguity. Remember, tag is a label, not a description.<br></br>\
**Word length**\
Tags should be short and ideally contain only one or two words.

### SEO

Tags are often used to call out unique keywords that specify and summarize content. Using unique, relevant terms as tags can strengthen a page’s search visibility.

Design

## Token

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                                | Collection | CSS var                                        | Preview  |
| ----------------------------------- | ---------- | ---------------------------------------------- | -------- |
| tag/height/lg                       | Component  | `var(--dds-tag-height-lg)`                     | —        |
| border/radius/xs                    | Semantic   | `var(--dds-border-radius-xs)`                  | —        |
| border/width/xs                     | Semantic   | `var(--dds-border-width-xs)`                   | —        |
| color/background/BRAND/subtle-rest  | Semantic   | `var(--dds-color-background-brand-subtle-rest)`| \#D9F5FD |
| color/border/BRAND/subtle           | Semantic   | `var(--dds-color-border-brand-subtle)`         | \#5CC1EE |
| tag/gap/lg                          | Component  | `var(--dds-tag-gap-lg)`                        | —        |
| tag/padding-horizontal/lg           | Component  | `var(--dds-tag-padding-horizontal-lg)`         | —        |
| tag/padding-vertical/lg             | Component  | `var(--dds-tag-padding-vertical-lg)`           | —        |
| icon/size/md                        | Component  | `var(--dds-icon-size-md)`                      | —        |
| color/text/BRAND/rest               | Semantic   | `var(--dds-color-text-brand-rest)`             | \#0063B8 |
| color/background/SUCCESS/subtle-rest| Semantic   | `var(--dds-color-background-success-subtle-rest)` | \#E9F5CE |
| color/border/SUCCESS/subtle         | Semantic   | `var(--dds-color-border-success-subtle)`       | \#9BC438 |
| color/text/SUCCESS/rest             | Semantic   | `var(--dds-color-text-success-rest)`           | \#436F00 |
| color/background/WARNING/subtle-rest| Semantic   | `var(--dds-color-background-warning-subtle-rest)` | \#FEEFCB |
| color/border/WARNING/subtle         | Semantic   | `var(--dds-color-border-warning-subtle)`       | \#E6AC28 |
| color/text/WARNING/rest             | Semantic   | `var(--dds-color-text-warning-rest)`           | \#925400 |
| color/background/ERROR/subtle-rest  | Semantic   | `var(--dds-color-background-error-subtle-rest)` | \#FFECEE |
| color/border/ERROR/subtle           | Semantic   | `var(--dds-color-border-error-subtle)`         | \#FF99A1 |
| color/text/ERROR/rest               | Semantic   | `var(--dds-color-text-error-rest)`             | \#BB2A33 |
| color/background/NEUTRAL/subtle-rest| Semantic   | `var(--dds-color-background-neutral-subtle-rest)` | \#EBF1F6 |
| color/border/NEUTRAL/pale           | Semantic   | `var(--dds-color-border-neutral-pale)`         | \#C5D4E3 |
| color/text/NEUTRAL/rest             | Semantic   | `var(--dds-color-text-neutral-rest)`           | \#1D2C3B |
| button/size/md                      | Component  | `var(--dds-button-size-md)`                    | —        |
| button/background/ghost-rest        | Component  | `var(--dds-button-background-ghost-rest)`      | \#40586D00 |
| button/background/ghost-hover       | Component  | `var(--dds-button-background-ghost-hover)`     | \#40586D1A |
| color/text/NEUTRAL/hover            | Semantic   | `var(--dds-color-text-neutral-hover)`          | \#141D28 |
| button/background/ghost-pressed     | Component  | `var(--dds-button-background-ghost-pressed)`   | \#40586D33 |
| color/text/NEUTRAL/pressed          | Semantic   | `var(--dds-color-text-neutral-pressed)`        | \#0A0E14 |
| color/background/SURFACE/inactive   | Semantic   | `var(--dds-color-background-surface-inactive)` | \#E1E1E1 |
| color/border/INACTIVE/base          | Semantic   | `var(--dds-color-border-inactive-base)`        | \#7E7E7E |
| color/text/inactive                 | Semantic   | `var(--dds-color-text-inactive)`               | \#B6B6B6 |
| color/background/BRAND/subtle-hover | Semantic   | `var(--dds-color-background-brand-subtle-hover)` | \#94DCF7 |
| color/text/BRAND/hover              | Semantic   | `var(--dds-color-text-brand-hover)`            | \#00468B |
| color/background/SUCCESS/subtle-hover | Semantic | `var(--dds-color-background-success-subtle-hover)` | \#C0DD78 |
| color/text/SUCCESS/hover            | Semantic   | `var(--dds-color-text-success-hover)`          | \#2C5000 |
| color/background/WARNING/subtle-hover | Semantic | `var(--dds-color-background-warning-subtle-hover)` | \#F5CD6F |
| color/text/WARNING/hover            | Semantic   | `var(--dds-color-text-warning-hover)`          | \#6D3A00 |
| color/background/ERROR/subtle-hover | Semantic   | `var(--dds-color-background-error-subtle-hover)` | \#FFC3C9 |
| color/text/ERROR/hover              | Semantic   | `var(--dds-color-text-error-hover)`            | \#8C161F |
| color/background/NEUTRAL/subtle-hover | Semantic | `var(--dds-color-background-neutral-subtle-hover)` | \#C5D4E3 |
| color/background/BRAND/subtle-pressed | Semantic | `var(--dds-color-background-brand-subtle-pressed)` | \#5CC1EE |
| color/text/BRAND/pressed            | Semantic   | `var(--dds-color-text-brand-pressed)`          | \#002A58 |
| color/background/SUCCESS/subtle-pressed | Semantic | `var(--dds-color-background-success-subtle-pressed)` | \#9BC438 |
| color/text/SUCCESS/pressed          | Semantic   | `var(--dds-color-text-success-pressed)`        | \#193100 |
| color/background/WARNING/subtle-pressed | Semantic | `var(--dds-color-background-warning-subtle-pressed)` | \#E6AC28 |
| color/text/WARNING/pressed          | Semantic   | `var(--dds-color-text-warning-pressed)`        | \#442200 |
| color/background/ERROR/subtle-pressed | Semantic | `var(--dds-color-background-error-subtle-pressed)` | \#FF99A1 |
| color/text/ERROR/pressed            | Semantic   | `var(--dds-color-text-error-pressed)`          | \#590A0F |
| color/background/NEUTRAL/subtle-pressed | Semantic | `var(--dds-color-background-neutral-subtle-pressed)` | \#A4B8CD |
| tag/height/md                       | Component  | `var(--dds-tag-height-md)`                     | —        |
| tag/gap/md                          | Component  | `var(--dds-tag-gap-md)`                        | —        |
| tag/padding-horizontal/md           | Component  | `var(--dds-tag-padding-horizontal-md)`         | —        |
| tag/padding-vertical/md             | Component  | `var(--dds-tag-padding-vertical-md)`           | —        |
| icon/size/sm                        | Component  | `var(--dds-icon-size-sm)`                      | —        |
| button/size/sm                      | Component  | `var(--dds-button-size-sm)`                    | —        |
| tag/height/sm                       | Component  | `var(--dds-tag-height-sm)`                     | —        |
| tag/gap/sm                          | Component  | `var(--dds-tag-gap-sm)`                        | —        |
| tag/padding-horizontal/sm           | Component  | `var(--dds-tag-padding-horizontal-sm)`         | —        |
| tag/padding-vertical/sm             | Component  | `var(--dds-tag-padding-vertical-sm)`           | —        |
| icon/size/xs                        | Component  | `var(--dds-icon-size-xs)`                      | —        |
| button/size/xs                      | Component  | `var(--dds-button-size-xs)`                    | —        |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-tag--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-tag--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-tag--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-tag--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-tag--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-tag--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Tags are small, interactive labels used to visually group, classify, or filter information.