<h2>What&#39;s new in V3</h2>
<ul>
<li><strong>Kinds</strong>: Emphasis are now documented as kinds. Medium emphasis was removed, keeping only filled and outline kinds.</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>Badges are small visual indicators used to highlight quick, essential information. They draw attention to statuses, counts or categories without interrupting the flow of content.</p>
<p>Use a badge to:</p>
<ul>
<li>Show status, such as success, error, new.</li>
<li>Display small pieces of metadata.</li>
<li>Provide quick, scannable context within a UI.</li>
</ul>
<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>
<p>All badge sizes, except dot and microdot, can contain up to three elements.</p>
<details data-name='image-block' data-images='[{"alt":"Badge visual asset representation","caption":"1. 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/v3/components/badge/badge-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use a badge to show status, item counts, items requesting attention, or highlighted content. Badges should not rely on color alone. Pair them with text or icons so the meaning is always clear.

### Status indicator

Use badges to show the state of an item. Status badges help users understand information at a glance.

Common examples include:

* Active/Inactive
* New/Updated
* Success/Warning/Error

**Status badges can appear:**

* **With text**: Use text when you need the status to be clear and explicit. This works best in tables, lists, and forms where users scan quickly.
* **With an icon**: Use an icon when the status is commonly recognized, like check, warning, or error. Icons are only available in medium and large badge sizes and should always match the correct semantic color. 
* **As a dot**: Use a dot for a subtle status cue next to an icon or text. Never use a dot alone, as it requires a **parent element** to provide meaning.

<details data-name='image-block' data-images='[{"alt":"Badge component example of status indicator","caption":"","url":"https://dds.dell.com/site/v3/components/badge/badge-usage-status-indicator-1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Featured or highlighted content

Use a badge to draw attention to a product feature or item you want to highlight.

Examples include:

* “Free trial”
* “New”
* “Recommended”

Place the badge near the item it describes, and choose a color and size that supports the content rather than overwhelming it.

<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/v3/components/badge/badge-usage-highlighted-content.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Attention and awareness

Use a badge to draw attention to information that may require the user’s awareness or follow‑up.

#### Urgent communication

Use a badge with an icon and short label for messages that need immediate visibility.

Examples:

* “System outage”
* “Action required”

<details data-name='image-block' data-images='[{"alt":"Badge with alert-error icon and label, \"System outage\".","caption":"","url":"https://dds.dell.com/site/v3/components/badge/badge-usage-urgent-communication.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Indication

Use a small dot to signal that something has changed or needs attention. Indicator dots should not be used for critical alerts.

Examples:

* New items
* Updates available
* Activity since last view

### Number counter

Use badges to show small counts, such as notifications or unread items.

Use the mini badge size for most counter cases.

* For counts over 99, display 99+.
* Use the brand color for global or app‑level counters, such as those in mastheads, side navigation, or flyout menus.

<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/v3/components/badge/badge-usage-number-counter.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

Badges come in two styles: filled and outline. Each offers a different level of visual emphasis.

* **Filled badge**: Has a solid background. Use this style when the badge needs to stand out, such as highlighting a status, marking something as new, or emphasizing an important label.
* **Outline badge:** Has a border with a transparent background. Use this style when you want a more subtle look or when the layout is busy and a filled badge could feel too strong.

<details data-name='image-block' data-images='[{"alt":"filled and outline badge","caption":"","url":"https://dds.dell.com/site/v3/components/badge/filled-outline-badge.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Options

Badges can include an icon, a text label, or no content at all. Use the option that best fits the context.

* **With icon and label**
  Use this when the badge needs more emphasis or when the icon helps clarify the meaning.Available only in large and medium sizes.
* **With label**
  Use this for most cases. The text clearly describes what the badge represents.Available in large, medium, small, and mini sizes.
* **Dot or microdot**
  Use this as a subtle indicator placed next to text or an icon. Not for standalone use.Does not support text or icons.

<details data-name='image-block' data-images='[{"alt":"With icon and label Icons are available only in large and medium badges.","caption":"","url":"https://dds.dell.com/site/v3/components/badge/badge-kinds-options-1.png"},{"alt":"With label Available in large, medium, small, and mini sizes.","caption":"","url":"https://dds.dell.com/site/v3/components/badge/badge-kinds-options-2.png"},{"alt":" Dot or microdot Used as subtle indicators; they do not include text or icons.","caption":"","url":"https://dds.dell.com/site/v3/components/badge/badge-kinds-options-3.png"}]' data-numberofcolumns='3' data-hideWidget='false'></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.

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 the 4 semantic colors and their corresponding icons.","caption":"","url":"https://dds.dell.com/site/v3/components/badge/badge-color-semantic.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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.                                                                                                                      |

[](https://www.dell.com/en-us/lp/brand-guidelines-color)

### 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.

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't fall within semantic color use cases.

<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/v3/components/badge/badge-color-neutral.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

Badges come in large, medium, small, mini, dot, and microdot sizes.

**Large** and **medium** badges **support both icons and labels.**

**Small** and **mini** badges **support labels only.**

**Dot** and **microdot** badges **do not include text or icons.** Avoid placing multiple dots too close together, as they can be unclear or distracting.

<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/v3/components/badge/badge-sizes.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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

Badges follow the 4‑pixel baseline grid. Space between badges increases with size to maintain visual balance.

* **Large badges:** 12 px spacing
* **Medium badges:** 8 px spacing
* **Small, mini, dot, and microdot badges:** 4 px spacing

<details data-name='image-block' data-images='[{"alt":"Margins between large badges.","caption":"","url":"https://dds.dell.com/site/v3/components/badge/badge-layout-specifications-1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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

## Tokens

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   |
| ------------------------------------ | ---------- | --------------------------------------------------- | --------- |
| badge/gap/lg                         | Component  | `var(--dds-badge-gap-lg)`                           | \-        |
| badge/padding-horizontal/lg          | Component  | `var(--dds-badge-padding-horizontal-lg)`            | \-        |
| badge/size/lg                        | Component  | `var(--dds-badge-size-lg)`                          | \-        |
| color/background/BRAND/base-rest     | Semantic   | `var(--dds-border-radius-rounded)`                  | \-        |
| color/background/BRAND/base-rest     | Semantic   | `var(--dds-color-background-brand-base-rest)`       | \#0672CB  |
| icon/size/sm                         | Component  | `var(--dds-icon-size-sm)`                           | \-        |
| color/text/neutral                   | Semantic   | `var(--dds-color-text-neutral)`                     | \-        |
| badge/size/dot                       | Component  | `var(--dds-badge-size-dot)`                         | \-        |
| border/width/sm                      | Semantic   | `var(--dds-border-width-sm)`                        | \-        |
| color/background/BRAND/subtle-rest   | Semantic   | `var(--dds-color-background-brand-subtle-rest)`     | \-        |
| color/border/BRAND/subtle            | Semantic   | `var(--dds-color-border-brand-subtle)`              | \#5CC1EE  |
| color/background/ERROR/base-rest     | Semantic   | `var(--dds-color-background-error-base-rest)`       | \#D0353F  |
| color/background/SUCCESS/base-rest   | Semantic   | `var(--dds-color-background-success-base-rest)`     | \#4F7D00  |
| color/background/WARNING/base-rest   | Semantic   | `var(--dds-color-background-warning-base-rest)`     | \#6D3A00  |
| border/width/xs                      | Semantic   | `var(--dds-border-width-xs)`                        | \-        |
| color/text/BRAND/rest                | Semantic   | `var(--dds-color-text-brand-rest)`                  | \#0063B8  |
| 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/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/INFO/base-rest      | Semantic   | `var(--dds-color-background-info-base-rest)`        | \#0672CB  |
| color/background/INFO/subtle-rest    | Semantic   | `var(--dds-color-background-info-subtle-rest)`      | \#D9F5FD  |
| color/border/INFO/subtle             | Semantic   | `var(--dds-color-border-info-subtle)`               | \#5CC1EE  |
| color/text/INFO/rest                 | Semantic   | `var(--dds-color-text-info-rest)`                   | \#0063B8  |
| badge/gap/md                         | Component  | `var(--dds-badge-gap-md)`                           | \-        |
| badge/padding-horizontal/md          | Component  | `var(--dds-badge-padding-horizontal-md)`            | \-        |
| badge/size/md                        | Component  | `var(--dds-badge-size-md)`                          | \-        |
| icon/size/xs                         | Component  | `var(--dds-icon-size-xs)`                           | \-        |
| badge/gap/xs                         | Component  | `var(--dds-badge-gap-xs)`                           | \-        |
| badge/padding-horizontal/xs          | Component  | `var(--dds-badge-padding-horizontal-xs)`            | \-        |
| badge/size/xs                        | Component  | `var(--dds-badge-size-xs)`                          | \-        |
| color/background/NEUTRAL/base-rest   | Semantic   | `var(--dds-color-background-neutral-base-rest)`     | \#293B4D  |
| color/background/NEUTRAL/subtle-rest | Semantic   | `var(--dds-color-background-neutral-subtle-rest)`   | \-        |
| color/border/NEUTRAL/subtle          | Semantic   | `var(--dds-color-border-neutral-subtle)`            | \#5C6E7E  |
| color/text/NEUTRAL/rest              | Semantic   | `var(--dds-color-text-neutral-rest)`                | \#1D2C3B  |
| badge/gap/sm                         | Component  | `var(--dds-badge-gap-sm)`                           | \-        |
| badge/padding-horizontal/sm          | Component  | `var(--dds-badge-padding-horizontal-sm)`            | \-        |
| badge/size/sm                        | Component  | `var(--dds-badge-size-sm)`                          | \-        |
| icon/size/2xs                        | Component  | `var(--dds-icon-size-2xs)`                          | \-        |
| badge/size/micro-dot                 | Component  | `var(--dds-badge-size-micro-dot)`                   | \-        |

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

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