Badge

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Configuration
  4. Space and width
  5. Interaction states
  1. Style
  2. Theme
  3. Configuration
  4. Space and width
  5. Interaction states

Style

A badge is number text on a pill background used to reflect the count of something.

Anatomy

Anatomy of a badge with annotations; number 1 is pointing to the container and number 2 is pointing to the counter number
  1. Container
  2. Counter number

Theme

A badge is available in light and dark theme.

Light theme

Light theme badges

Dark theme

Dark theme badges

Configuration

All badges have the same height and border radius.

How a badge is constructed showing border radius and height details

Space and width

Badge spacing and minimum width

Property Current value
Minimum width --rh-length-2xl

Interaction states

A badge contains only text and is not interactive.

Edit this page on GitHub