Skip to main content

Home
About
Get started
Foundations
Tokens
Elements
- All elements
- Accordion
- Alert
- Audio player
- Avatar
- Back to top
- Badge
- Blockquote
- Breadcrumb
- Button
- Call to action
- Card
- Code block
- Dialog
- Footer
- Health index
- Navigation (primary)
- Navigation (secondary)
- Pagination
- Popover
- Progress steps
- Site status
- Skip link
- Spinner
- Statistic
- Subnavigation
- Surface
- Switch
- Table
- Tabs
- Tag
- Tile
- Timestamp
- Tooltip
Patterns
Accessibility
Design/code status
Release notes
Get support

Badge

Overview Style Guidelines Code Demos 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 — Container

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	32px 2.0rem

Interaction states

A badge contains only text and is not interactive.

© 2021-2024 Red Hat, Inc.