<h2>When to use</h2>
<p>Tags and badges are visually similar, but tags are interactive and 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 allow users to group, sort, or filter information. Tags frequently contain keywords or metadata. They provide quick access to specific categories and support content classification and navigation.</td>
</tr>
<tr>
<td><a href="/components/badge/">Badge</a></td>
<td>Use badges as read-only status indicators or labels. Badges can be displayed in groups or individually, and express meaning through color and text.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of a tag, labeled 1 through 4.","caption":"Tags have four main elements. The tag container and tag label are required, whereas the icon and dismiss icon are optional.\n\n1. Tag container: primary element that holds content, color, and icons.\n2. Icon: optional leading icon.\n3. Tag label: short, descriptive text describing the tag.\n4. Dismiss icon: optional icon to close the tag.","url":"https://dds.dell.com/site/stage/96/59/Tag_Anatomy_70c35e6b78.png"}]' data-numberofcolumns='1'></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

Tags are frequently used to categorize topics, products, or subjects. They often summarize the page content. If used in this instance, make sure tag subjects are relevant to the displayed content.

### Faceted search filters

Tags can also be used as facets to filter attributes. They allow users to refine their search results by allowing them to exclude or include specific preferences in search queries. Tags in this instance are dismissible.

<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":"","url":"https://dds.dell.com/site/production/50/1d/Tag_Usage_91ae461437.png"}]' data-numberofcolumns='1'></details>

## Kinds

There are two elements that can be added to the default tag: a leading icon and a dismiss icon. Both [icons](/foundations/icons/) are available for sizes large, medium, and small.

<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/stage/fa/19/Tag_Kinds_1_132cabed4c.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/stage/ed/32/Tag_Kinds_2_2bfbaede7a.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/stage/c7/54/Tag_Kinds_3_822dcd24c3.png"}]' data-numberofcolumns='3'></details>

## Sizes

Tags come in three sizes: large, medium, and small. Multiple tags should match in size. Sizes should correspond to the device and match other components in the same experience.

<details data-name='image-block' data-images='[{"alt":"Large tag","caption":"","url":"https://dds.dell.com/site/stage/6e/84/Tag_Sizes_1_2c514457b9.png"},{"alt":"Medium tag","caption":"","url":"https://dds.dell.com/site/stage/c4/98/Tag_Sizes_2_0dd6b510ff.png"},{"alt":"Small tag","caption":"","url":"https://dds.dell.com/site/stage/b0/bb/Tag_Sizes_3_caccda7cdc.png"}]' data-numberofcolumns='3'></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 when stacked and display a specific margin between them, depending on the size of tag used. The recommended space between each tag should be a multiple of 4 pixels (read more in the [baseline grid section](/foundations/grid/#baseline-grid) on the grid foundations page). Use the same value for horizontal and vertical spacing if the tag group’s containing element is too narrow and tags need to wrap into multiple lines. Spacing may be customized if another value better fits 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/stage/2a/c4/Tag_Specifications_1_91fa2250eb.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/stage/36/51/Tag_Specifications_2_badde2278a.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/stage/f3/58/Tag_Specifications_3_970fb91a5a.png"}]' data-numberofcolumns='3'></details>

## Interaction

### Behavior and states

Tags display five states of behavior: rest, hover, press, inactive, and focus. If used, the dismissible icon area will display the states separately.

<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/stage/9c/ca/Tag_Usage_1_a59c16dfa7.png"}]' data-numberofcolumns='1'></details>

## Color

### Light mode

There are no specific guidelines on which color tag to choose for an experience. Designers may opt to associate a color with a product, category, or a user persona. The only recommendation is to keep the color consistent with the associated category, and consider that using too many colors in certain experiences may introduce a heavy cognitive load for some users. Tags are available in the full [color](/foundations/color/) suite, except for white and light blue.

<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/stage/17/4c/Tag_Color_Light_Mode_755909e12c.png"}]' data-numberofcolumns='1'></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

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-tag--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-tag--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-tag--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-tag--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-tag--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-tag--docs&viewMode=docs&websiteFrame=true'></details>

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

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
