Badges

Overview

Badges are compact visual indicators used to label, annotate, or highlight the status of an item. They provide supplemental information without interrupting the user flow and are commonly used to convey counts, states, or classifications.

Badges are decorative and informational, not interactive. They should be used sparingly to avoid visual noise and maintain clarity.

Guidelines

Dos

• Use badges to display status, category, or count-based information.
• Use badges as supplementary indicators, not primary content.
• Group multiple badges using a badge-container to ensure proper alignment and spacing.
• Use color intentionally to communicate meaning.
• Keep badge text short and scannable (typically one word or a number).

Don’ts

• Don’t use badges as interactive elements or actions.
• Don’t overload interfaces with excessive badges.
• Don’t use badges to replace critical messaging or alerts.
• Don’t place badges where they compete with primary actions.
• Don’t use custom colors outside the approved badge variants.

Variants

Variant	Description	Example Use
Default	Neutral badge for general labeling	Labels, metadata
Primary	Brand-emphasized badge	Featured, highlighted states
Success	Positive or completed status	Active, Approved
Danger	Critical or error-related status	Error, Blocked
Info	Informational or descriptive status	Info, Details
Warning	Cautionary or pending status	Pending, Needs Review

Badge container

When displaying multiple badges together, wrap them in a badge-container.

• Ensures consistent alignment and spacing.
• Prevents wrapping and spacing issues across layouts.
• Required when more than one badge appears inline.

Badges

Badges in elements

Badges can act as decorators within other elements.