Badge

Overview Style Guidelines Code Accessibility

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 the light theme only.

Light 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
Example Token Description
8 --rh-space-md 8px spacer

Property Current value
Minimum width 32p
2.0rem

Interaction states

A badge contains only text and is not interactive.

© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top