Skip to main content

Badges

Badges are small, colored labels used to display additional information such as status, category, or tags to ensure consistency across the design system.

PreviewDesign TokenColor Value

Badge Styles

Each badge follows a predefined set of colors:

  • Neutral: Uses neutral-1000 for the border.
  • Brand, Product, Info, Success, Warning, Critical: Use their respective 500 token for the border.
  • Background: Always white.
  • Size: 25px height.

Example: Badge Styles with Design Tokens

The following CSS classes define badge colors dynamically:

.badge-neutral { border-color: var(--neutral-1000); color: var(--neutral-1000); }
.badge-brand { border-color: var(--brand-500); color: var(--brand-500); }
.badge-product { border-color: var(--product-500); color: var(--product-500); }
.badge-info { border-color: var(--info-500); color: var(--info-500); }
.badge-success { border-color: var(--success-500); color: var(--success-500); }
.badge-warning { border-color: var(--warning-500); color: var(--warning-500); }
.badge-critical { border-color: var(--critical-500); color: var(--critical-500); }