Skip to main content

Components

Badge

Badge is a non-interactive component that displays status with or without a number. Use Tag if you want text instead of a number.

We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.

Ensure that the information is also accessible to screen reader users. A Badge without text violates WCAG 2.1, as information must not be communicated through colour or shape alone.1

We are working on developing more detailed recommendations for using badges in different contexts.
Follow the work on GitHub (github.com)

Relevant sources

Edit this page on github.com (opens in a new tab)