<h2>When to use</h2>
<p>Badges and tags 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>Badge</td>
<td>The badge component indicates a status or count. Badges are read-only status indicators or labels and are not interactive.</td>
</tr>
<tr>
<td><a href="/components/tag/">Tag</a></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>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of a badge, labeled 1 through 3.","caption":"Large and medium badges can contain up to three elements:\n\n1. Badge container: primary element, color-coded.\n2. Icon: optional semantic icon.\n3. Label: short descriptive text describing the badge.","url":"https://dds.dell.com/site/stage/e2/b0/Badge_Anatomy_15b0fb7261.png"}]' data-numberofcolumns='1'></details>

<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/indicators-validations-notifications/","type":"External"},"title":"Indicators, validations, and notifications","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/visual-indicators-differentiators/","type":"External"},"title":"Visual indicators in a list","description":"Read the Nielsen Norman Group&#39;s article on badge.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use a badge to indicate status, item count, items requesting attention, or featured content. Badges should not rely on color alone to convey meaning (see the section on [color](/components/badge/#color) below), as color is not a universal experience for everyone. Combining multiple elements—text, emphasis, and [icons](/foundations/icons/)—in each badge can optimize visual understanding.

### Status

It is recommended you use semantic colors for statuses.

#### With icon

Icons are only available in large and medium badges. Specific icons are reserved for use with their corresponding semantic colors. It is not recommended that you use these icons with a conflicting semantic color, as they each have an established, universal meaning. However, any icon within the [icon gallery](/foundations/icons/#icon-gallery) is available for use.

<details data-name='image-block' data-images='[{"alt":"Example of a product inventory page. Badges read, \"In stock\" with an alert-check icon, \"Out of stock\" with an alert-error icon, and \"Low stock\" with an alert-notice icon.","caption":"","url":"https://dds.dell.com/site/production/0f/63/Badge_Usage_Status_Indicator_Icon_81ee668c9b.png"}]' data-numberofcolumns='1'></details>

#### Without icon

Large, medium, small, and mini badges are used to convey status with text.

<details data-name='image-block' data-images='[{"alt":"Example of a component status page. Badges read, \"Published\", \"Experimental\", and \"In backlog\".","caption":"","url":"https://dds.dell.com/site/stage/43/df/Badge_Usage_Status_Indicator_No_Icon_d18081d5b4.png"}]' data-numberofcolumns='1'></details>

#### Dot

Use a dot adjacent to text or place it on top of an icon to indicate status. Dots are not intended for standalone use.

<details data-name='image-block' data-images='[{"alt":"Example of a component status page. Statuses are conveyed by filled and unfilled dots with adjacent text that reads: \"In review\", \"Draft\", and \"Approved\".","caption":"","url":"https://dds.dell.com/site/stage/5d/3d/Badge_Usage_Status_Indicator_Dot_0bbe9517f8.png"}]' data-numberofcolumns='1'></details>

### Featured or highlighted content

Use a badge to emphasize a product feature or item. Consider badge color, placement, and emphasis when used near buttons.

<details data-name='image-block' data-images='[{"alt":"\"Free trial\" badge next to a featured product title on a card.","caption":"","url":"https://dds.dell.com/site/stage/3c/0f/Badge_Usage_Featured_Content_efecf0d0c9.png"}]' data-numberofcolumns='1'></details>

### Attention and awareness

#### Urgent communication

Use a badge with an icon and concise label for items that require additional action or immediate attention.

<details data-name='image-block' data-images='[{"alt":"Badge with alert-error icon and label, \"System outage\".","caption":"","url":"https://dds.dell.com/site/production/21/fc/Badge_Usage_Attention_Awareness_Urgent_Communication_e7a62c556a.png"}]' data-numberofcolumns='1'></details>

#### Indication

Use a dot as an indicator to bring awareness to an icon when a status has changed or attention is requested. Indicator dots are not intended for critical alerts.

<details data-name='image-block' data-images='[{"alt":"A dot placed on an alarm-bell icon adjacent to text, \"Utility item\".","caption":"","url":"https://dds.dell.com/site/stage/8a/22/Badge_Usage_Attention_Awareness_Indication_09bc94be4d.png"}]' data-numberofcolumns='1'></details>

### Number counter

Although all badge sizes that allow for text labels can be used as a numeric counter, use mini badge for most cases. For counts greater than 99, use 99+. Note that the [brand color](https://brand.delltechnologies.com/brand-guidelines-color/) is commonly used for global elements, such as mastheads, side navigation panels, and their associated flyouts.

<details data-name='image-block' data-images='[{"alt":"A mini badge with numeric counter, 6, placed on a mail icon adjacent to text, \"Inbox\".","caption":"","url":"https://dds.dell.com/site/stage/ec/f7/Badge_Usage_Number_Counter_61a5cd0f47.png"}]' data-numberofcolumns='1'></details>

## Kinds

### Options

Badges are available with icons, text labels, or without. Large and medium badges can accommodate both an icon and a label. Small and mini badges are text-only. Dot and microdot do not include text or icons.

<details data-name='image-block' data-images='[{"alt":"A large badge with info icon and label, \"Badge label\".","caption":"**With icons and label**: Icons are only available in the large and medium badges.","url":"https://dds.dell.com/site/stage/3a/54/Badge_Kinds_Icon_Label_92f3eb5d35.png"},{"alt":"A large badge with label, \"Badge label\".","caption":"**With label**: Available for sizes large, medium, small, and mini.","url":"https://dds.dell.com/site/stage/c0/cf/Badge_Kinds_Label_772af09707.png"},{"alt":"A dot badge, not include text or icons.","caption":"**Dot or microdot**: don’t include text or icons.","url":"https://dds.dell.com/site/stage/b3/17/Badge_Kinds_No_Icon_No_Label_c3a79d009e.png"}]' data-numberofcolumns='3'></details>

## Color

Badge [colors](http://delldesignsystem.com/foundations/color/) are limited to semantic, brand, and neutral colors. Designers should align usage to meaning. Remember that color is not a universal experience, and usage should not rely on color alone to convey meaning.

### Semantic

Badges are available in four semantic colors. In large and medium sizes, these colors are associated with specific icons.

<details data-name='image-block' data-images='[{"alt":"Image showing the 4 semantic colors and their corresponding icons.","caption":"","url":"https://dds.dell.com/site/production/02/b5/Badge_Color_Semantic_74fa110452.png"}]' data-numberofcolumns='1'></details>

| Color                 | Use case                                                                                                                                                                                                                                         |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Informative (default) | Conveys informative messages with a blue background and an optional information icon. Informative is the default badge color in the UI kit. It is robust and has the greatest flexibility in its usage. Paired with the **alert-info-cir** icon. |
| Success               | Provides positive or success feedback with a green background and an optional checkmark icon. Paired with the **alert-check-cir** icon.                                                                                                          |
| Error                 | Provides negative feedback or error messaging with a red background and error icon. Paired with the **alert-error** icon.                                                                                                                        |
| Warning               | Warns users that they need to take notice with a yellow background and warning icon. Paired with the **alert-notice** icon.                                                                                                                      |

### Brand

[Brand colors](https://www.dell.com/en-us/lp/brand-guidelines-color) are intended for use in mastheads, side navigation panels, and associated flyouts. Mini badge and microdot are commonly used with brand colors. Note that placing large, medium, small, or mini brand-colored badges near buttons may erroneously give users the impression that badges are interactive, due to their similarity in color.

<details data-name='image-block' data-images='[{"alt":"Image showing mini button usage on the masthead.","caption":"","url":"https://dds.dell.com/site/stage/02/21/Badge_Color_Brand_5164d52176.png"}]' data-numberofcolumns='1'></details>

### Neutral

Neutral badges belong in a pairing with semantic or brand colors to create high-contrast through emphasis. You can review guidance on the [neutral palette](http://delldesignsystem.com/foundations/color/#neutral-palette) on the color foundations page.

<details data-name='image-block' data-images='[{"alt":"Example of a billing activity page. Badges read, \"Recurring payment\" and \"One-time payment\".","caption":"An example of pairing of light and heavy emphasis. Mixing an informative badge with heavy emphasis and a neutral badge with medium or light emphasis is recommended for binary statuses conveying information that doesn&#39;t fall within semantic color use cases.","url":"https://dds.dell.com/site/stage/3a/f3/Badge_Color_Neutral_0aa80614a0.png"}]' data-numberofcolumns='1'></details>

### Emphasis

Use color emphasis to reinforce the importance or visibility of the badge. When not using icons, consider using mixed emphasis to differentiate between badges so that you are not relying on color alone to convey meaning.

<details data-name='image-block' data-images='[{"alt":"Image showing the 3 levels of color emphasis for semantic and neutral badges.","caption":"","url":"https://dds.dell.com/site/production/be/d2/Badge_Color_Emphasis_3281022bee.png"}]' data-numberofcolumns='1'></details>

| Emphasis | Use cases                                                            |
| -------- | -------------------------------------------------------------------- |
| Heavy    | Darker weight background with light label/icon and no border         |
| Medium   | Medium, more saturated background with dark label/icon and no border |
| Light    | Light weight background with heavier label/icon and with border      |

It is not recommended to mix emphasis without intention, and designers should consider doing so only where it serves to improve user understanding. For example, pairing high and low emphasis badge assignments can help create visual differentiation, especially with text-only badges.

## Sizes

Badges come in large, medium, small, mini, dot, and microdot sizes. Large and medium badges can contain an icon and label. Dot and microdot are not intended to contain text, numbers, or icons. Do not stack dots or combine them in close proximity with each other.

<details data-name='image-block' data-images='[{"alt":"Image showing the six badge sizes.","caption":"Badge sizes in descending order: Large, medium, small, mini, dot, and microdot.","url":"https://dds.dell.com/site/stage/07/69/Badge_Size_1d058506b8.png"}]' data-numberofcolumns='1'></details>

| Size     | Use case                                                                                                          |
| -------- | ----------------------------------------------------------------------------------------------------------------- |
| Large    | Use with larger viewports or for heroes that need to draw a user’s attention.                                     |
| Medium   | This default size can be used in most cases, as long as you can maintain visual balance.                          |
| Small    | Use in compact areas where a default badge may not fit, such as a small component.                                |
| Mini     | Use in compact areas where a medium or small badge may not fit. Badges with numeric counters often use this size. |
| Dot      | Use with adjacent text or on top of an icon to indicate a status or noncritical changes requesting attention.     |
| Microdot | Use with adjacent text or on top of an icon to indicate a status or noncritical changes requesting attention.     |

## Layout

### Specifications

When grouping badges, the recommended space between each badge should be a multiple of 4 pixels, horizontally and vertically (read more in the [baseline grid section](http://delldesignsystem.com/foundations/grid/#baseline-grid) on the grid foundations page). Specified margins for each badge size are shown below. All units of measurement are in pixels.

<details data-name='image-block' data-images='[{"alt":"Margins between large badges.","caption":"Place a 12-pixel margin between large badges.","url":"https://dds.dell.com/site/stage/da/b9/Badge_Specifications_Large_79f202848c.png"},{"alt":"Margins between medium badges.","caption":"Place an 8-pixel margin between medium badges.","url":"https://dds.dell.com/site/stage/d0/4b/Badge_Specifications_Medium_d1a258f04f.png"}]' data-numberofcolumns='2'></details>

<details data-name='image-block' data-images='[{"alt":"Margins between small badges.","caption":"Place an 4-pixel margin between small badges.","url":"https://dds.dell.com/site/stage/cd/d8/Badge_Specifications_Small_9a7e2c5ca3.png"},{"alt":"Margins between mini badges.","caption":"Place an 4-pixel margin between mini badges.","url":"https://dds.dell.com/site/stage/f5/d2/Badge_Specifications_Mini_e4929f8cf8.png"}]' data-numberofcolumns='2'></details>

## Standards

### Accessibility

**A badge’s meaning should not be communicated by color alone**
Support the meaning of a badge with appropriate text or an icon. This helps users who cannot see color, or who are using assistive technology. 
Any badge text must provide an indication of the status conveyed by the badge regardless of the color used. If using an accompanying icon, its meaning must be visually self-evident and commonly used in that context, such as an error alert, check, or copy icon.
WCAG 2.2: 1.4.1 Use of Color
[Understanding Success Criterion 1.4.1: Use of Color (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)
<br></br>
**Ensure each badge meets the appropriate level of contrast**
Both the label and icon must meet a contrast ratio of 4.5:1 with the badge background for large, medium, small, and mini badges. While there is no requirement to meet a specific contrast between these badges and the page background (as these badges are not active UI components), consider increasing available contrast when possible. Dots and microdots should achieve a 3:1 contrast ratio or greater with the page background.
WCAG 2.2: 1.4.1 Non-text Contrast
[Understanding Success Criterion 1.4.11: Non-text Contrast (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
<br></br>
**Badges with an icon only (and no text) should be used carefully, after checking for accessibility**
The meaning of the icon must be easily and universally understood. Add an appropriate programmatically associated semantic label, such as an aria-label attribute, so it can be read by screen readers.
WCAG 2.2: 1.1.1 Non-text Content
[Understanding Success Criterion 1.1.1: Non-text Content (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html)
<br></br>
**Avoid indicating status with multiple, differently colored dots or microdots**
Because dots and microdots do not include labels, they can indicate only binary states such as on/off (conveyed by filled versus not filled). It can also be used when individual items have a different status than other items.
Do not use colored microdots to indicate status only by color, or to show multiple statuses with different colors, such as green for “active”, yellow for “paused”, and red for “inactive”. Dots and microdots using color to convey meaning must include adjacent text—or in rare cases, universal icons—to explicitly state meaning.
WCAG 2.2: 1.4.1 Use of Color
[Understanding Success Criterion 1.4.1: Use of Color (w3.org)](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)

### Content

**Badge labels**</br>
Because badges are status indicators meant to register meaning at a glance, labels within a badge must be as concise and direct as possible. Remember, badge is a label, not a description.</br>
**Do**: Success</br>
**Don’t**: Your action was successful
<br></br>
**Complex state**</br>
Use only two words if you need to describe a complex state.</br>
**Do**: Partially refunded</br>
**Don’t**: Refund partially fulfilled
<br></br>
**Past tense**</br>
Use past tense to describe the status of an action that is completed.</br>
**Do**: Refunded</br>
**Don’t**: Refund
<br></br>
**Punctuation**</br>
Content within a badge does not require punctuation.
<br></br>
**Capitalization**</br>
Use sentence case within a badge. Never use all caps or title case.</br>
**Do**: Action completed</br>
**Don’t**: ACTION COMPLETED
<br></br>
**Status**</br>
Each badge should only indicate one status. Do not combine icons or text statuses into one badge.</br>
**Do**: Approved</br>
**Don’t**: Submitted and approved
<br></br>
**Icons**</br>
Only use icons that are commonly recognized. If used without text, limit icon use to the most common icons, like download, alert-error, and check.
<br></br>
**Special characters**</br>
Don’t use special characters as part of badge text.

Badge

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

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

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

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-badge--basic&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-badge--basic)

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

A badge is a visual label or indicator used to convey status or highlight content.

