Skip to main content Red Hat Design System logo Contribute on Github

Badge

Overview Style Guidelines Code Demos Accessibility

Usage

Use a badge to reflect counts like number of objects, events, or unread items.

Variants

A badge includes various status colors that communicate different semantic meanings.

Warning

Relying on color alone to communicate information causes barriers to access for many readers. Go to the Accessibility page to learn more.

Image of neutral, default, success, warning, error, and danger badges in a row
Badge Name Use case
17 Neutral Indicates neutrality or no impact
17 Info Indicates informative or low impact
17 Success Indicates stability or completion
17 Moderate Indicates caution
17 Important Indicates an error
17 Critical Indicates danger or something critical

Badge vs. tag

If you need to add specific text captions to elements, consider using a Tag instead.

Writing content

Counter number

The width of a badge varies based on the counter number. Using a number larger than the threshold will display a + at the end. For example, if 999 is the threshold, using 1,000 or larger will display 999+.

Badges with various counter numbers; from left to right, a badge with 1, a badge with 50, a badge with 500, and a badge with 999+

Behavior

Filtering

A badge is often found in filter toggles to indicate the number of selections that are made in a toolbar filter or select list.

A badge used in a filter dropdown and counting three selected checkboxes within a menu

Best practices

Large number

Do not allow a badge to display a count over 999.

A badge counting to 1,00,000 which is incorrect usage

Two badges

Be careful using two badges. Using color only and the lack of other visual cues might make it difficult to differentiate unread or actionable items associated with the badges.

Two badges with the same counter number, but with different background colors and no other unique visual cues which is incorrect usage
© 2021-2024 Red Hat, Inc. Deploys by Netlify