Status
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
Badge
A badge is a visual label or indicator used to convey status or highlight content.
Contents
What's newCopy link to this section
Copy link to this section
Badge is a new, standalone component. In v1, badges were grouped with the notifications component. The size range has been expanded to include dots and microdots. In addition to an updated font ramp, badge now incorporates semantic colors, icons, and various emphases.
When to useCopy link to this section
Copy link to this section
Badges and tags are visually similar, but tags are interactive and badges are not.
| Component | Use case |
|---|---|
| Badge | The badge component indicates a status or count. Badges are read-only status indicators or labels and are not interactive. |
| Tag | 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. |
AnatomyCopy link to this section
Copy link to this section
Large and medium badges can contain up to three elements:
- Badge container: primary element, color-coded.
- Icon: optional semantic icon.
- Label: short descriptive text describing the badge.
ArticlesCopy link to this section
Copy link to this section
Indicators, validations, and notifications
Read the Nielsen Norman Group's article on badge.
Contents
Contents
UsageCopy link to this section
Copy link to this section
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 below), as color is not a universal experience for everyone. Combining multiple elements—text, emphasis, and icons—in each badge can optimize visual understanding.
Status
It is recommended you to 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 is available for use.
Without icon
Large, medium, small, and mini badges are used to convey status with text.
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.
Featured or highlighted content
Use a badge to emphasize a product feature or item. Consider badge color, placement, and emphasis when used near buttons.
Attention and awareness
Urgent communication
Use a badge with an icon and concise label for items that require additional action or immediate attention.
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.
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 is commonly used for global elements, such as mastheads, side navigation panels, and their associated flyouts.
KindsCopy link to this section
Copy link to this section
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.
With icons and label: Icons are only available in the large and medium badges.
With label: Available for sizes large, medium, small, and mini.
Dot or microdot: don’t include text or icons.
ColorCopy link to this section
Copy link to this section
Badge colors 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 the large and medium sizes, these colors are associated with specific icons.
| 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 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.
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 on the color foundations page.
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’t fall within semantic color use cases.
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.
| 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.
SizesCopy link to this section
Copy link to this section
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.
Badge sizes in descending order: Large, medium, small, mini, dot, and microdot.
| 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. |
LayoutCopy link to this section
Copy link to this section
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 on the grid foundations page). Specified margins for each badge size are shown below. All units of measurement are in pixels.
Place an 12-pixel margin between large badges.
Place an 8-pixel margin between medium badges.
Place an 4-pixel margin between small badges.
Place an 4-pixel margin between mini badges.
StandardsCopy link to this section
Copy link to this section
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.1: 1.4.1 Use of Color
Understanding Success Criterion 1.4.1: Use of Color (w3.org)
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.1: 1.4.1 Non-text Contrast
Understanding Success Criterion 1.4.11: Non-text Contrast (w3.org)
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.1: 1.1.1 Non-text Content
Understanding Success Criterion 1.1.1: Non-text Content (w3.org)
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.1: 1.4.1 Use of Color
Understanding Success Criterion 1.4.1: Use of Color (w3.org)
Content
Badge labels
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.
Do: Success
Don’t: Your action was successful
Complex state
Use only two words if you need to describe a complex state.
Do: Partially refunded
Don’t: Refund partially fulfilled
Past tense
Use past tense to describe the status of an action that is completed.
Do: Refunded
Don’t: Refund
Punctuation
Content within a badge does not require punctuation.
Capitalization
Use sentence case within a badge. Never use all caps or title case.
Do: Action completed
Don’t: ACTION COMPLETED
Status
Each badge should only indicate one status. Do not combine icons or text statuses into one badge.
Do: Approved
Don’t: Submitted and approved
Icons
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.
Special characters
Don’t use special characters as part of badge text.
Contents
Contents
Live demoCopy link to this section
Copy link to this section
This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.
You are now entering a live demo of the component.
<span class="dds__badge">
<span class="dds__badge__label">Badge</span>
</span>