Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Badge

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-badgeImportingUsagerh-badge

Importing

Add rh-badge to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-badge/rh-badge.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-badge number="7">7</rh-badge>

<script type="module">
  import '@rhds/elements/rh-badge/rh-badge.js';
</script>
Copy to Clipboard Wrap lines

rh-badge

A badge provides a small numeric count on a pill for labels, filters, or lists. Set state when the count carries severity:

  • neutral - Indicates generic information or a message with no severity.
  • danger - Indicates a danger state, like an error that is blocking a user from completing a task.
  • warning - Indicates a warning state, like a non-blocking error that might need to be fixed.
  • caution - Indicates an action or notice which should immediately draw the attention
  • info - Indicates helpful information or a message with very little to no severity.
  • success - Indicates a success state, like if a process was completed without errors.

It must not take focus or act as a control; it has no implicit ARIA role. Provide context in surrounding text. Avoid color-only meaning (WCAG 1.4.1). Use threshold with number for values like 999+.

Slots 1

Slot Name Summary Description
[default]

Count text (default slot)

Put the numeric count in the default slot—the same value as the number attribute when you use number. The badge has no implicit accessible name; authors should provide context in surrounding text (labels, headings, table cells, etc.). For longer non-count labels, use rh-tag instead.
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 3

Attribute DOM Property Description Type Default
state state

Background severity: danger, warning, caution, neutral, success, or info. Defaults to neutral.

Legacy values are normalized: moderate → warning, important → caution, critical → danger, note → info.

 
'danger' | 'warning' | 'caution' | 'neutral' | 'success' | 'info'
 
'neutral'
number number

Numeric count rendered in the badge. With threshold, values above the threshold display as threshold+. For text-only labels without a count, use rh-tag instead.

 
number
 
unknown
threshold threshold

Upper bound for number; when number is greater, the badge shows threshold+.

 
number
 
unknown

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 13

Token Description Copy
--rh-border-radius-pill

Badge pill border radius

Pill border radius; Example: Label
--rh-length-lg

16px length token
--rh-font-size-body-text-xs

Badge text font size

12px font size
--rh-line-height-body-text

Badge line height

Line height for body text
--rh-space-md

8px spacer
--rh-color-text-primary-on-dark

Primary text on dark / saturated surfaces

Primary text color for dark theme
--rh-color-status-neutral

Neutral status background
--rh-color-status-info

Info status background
--rh-color-status-success

Success status background
--rh-color-status-caution

Caution status background
--rh-color-status-warning

Warning status background
--rh-color-text-primary-on-light

Primary text on light surfaces

Caution text color

Warning text color

Primary text color for light theme
--rh-color-status-danger

Danger status background
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify