Anatomy elements
#	Element	Description
1	Container	The colored, rounded shape that holds the Badge content.
2	Status indicator	A small colored dot marking an operational or lifecycle state.
3	Label	Text describing the category, quantity, or status.

Guidelines

Badge vs. Tag

Badges and Tags are similar components used to visually convey some type of metadata. However, it's important to understand the difference as they are not interchangeable:

Badge shows a read-only category, quantity, or status automatically set by the system rather than the user. They're used in table cells, inside list items or form labels, or as part of page headings.
Tag displays a user-created categorization, such as a filter identifier, that a user can create, edit, and remove. They're used in areas where users are expected to manage or organize data, such as tables.

Color can be helpful for conveying meaning to users when paired with descriptive text. When using color, be consistent with their usage across the app. Avoid using color purely for decoration to fit a particular color scheme or theme.

SuccessFailed

Do: Use consistent colors to represent the same or similar status or semantic meaning across the application.

SuccessFailed

Don't: Use colors to fit a theme or use multiple colors for the same status.

Status indicators

Reserve the status indicator dot for Badges that describe an operational or lifecycle state, such as online, running, or syncing. A static category or tier has no state to indicate.

Syncing

Do: Add a status indicator to a lifecycle state.

Enterprise

Don't: Add a status indicator to a static category or tier.

Types

Enterprise

Base

Base Badges are used for categorization, metadata, tiers, or numeric values that don't change with a lifecycle state.

Active

Status

Status Badges include a colored dot to communicate process states within a lifecycle such as success or failure.

Appearance

Colors

Badges are available in a range of colors with the default being grey. Within this range, a specific subset of colors is used semantically across the application.

For more information regarding color and accessibility, see Color and meaning.

Badgegrey

Badgeaccent

Badgeneutral-outline

Badgeaccent-outline

Badgered

Badgeraspberry

Badgeclementine

Badgeyellow

Badgegreen

Badgeteal

Badgeblue

Badgeplum

Badgepurple

Available colors

Badges have a wide range of colors.

Badgeneutral

Badgecritical

Badgecaution

Badgesuccess

Badgeinformation

Semantic colors

Semantic colors convey a consistent visual meaning throughout the application.

Font weight

Badge text is bold by default for readability and emphasis. Use a lighter font weight for cases where the Badge should be less visually prominent. Light text is not available on a status Badge.

Default

Bold

Bold serves as the default weight.

Default

Light

Lighter weights carry less visual emphasis.

Behaviors

Truncation

A Badge sizes itself to its content. When a container is too narrow, its text wraps to a second line by default. Enable truncation to keep the Badge on a single line and clip overflowing text with an ellipsis instead, such as in a fixed-width table column. Keep the label short enough to stay understandable when clipped.

Twelve new messages waiting for review

Truncated

When truncation is enabled, the label is clipped to a single line.

Content

Sentence case

Write Badge text in sentence case for consistency across the application.

Draft

Do: Use sentence case.

DRAFT

Don't: Use title case or all caps.

Length

Limit Badge text to one or two words, or a number, that accurately describes the category or status. Badges exist inline with supporting text so avoid full sentences.

Do: Use one or two words, or a number.

Twelve new messages waiting

Don't: Write a full phrase or sentence.

Badge

Anatomy