Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Badges

Badges indicate status, item count, or draw attention to another interface element.

Guidance

A badge is a visual label that can be used to indicate status, item count, or draw attention to another interface element. Badges and tags are visually similar, but tags are interactive and badges are not. If you're looking to filter, sort or display metadata, use a tag instead.

Badges may be confusing for users of assistive technologies. Make sure the context is clear like in the “Notifications” example, where it is understood that "10" is the number of notifications. Using color to add meaning only provides a visual indicator, which will not be conveyed to users of screen readers. In this case, make sure that any information denoted by the color is either obvious from the content itself (for example, the text in the badge), or is included through alternative means, such as a screen reader only .sr-only class.

Do

  • Use badges to show the status of something
  • Use badges to show the count of something
  • Keep badges brief, no more than one or two words
  • Make sure the colour is consistent when using the same badge in more than one place

Don’t

  • Make a badge a link
  • Use badges to mark something as "new"
  • Use badges in placements that could cause a user to confuse them with buttons

Badges

Information Success Warning Critical Light Dark

HTML

<!-- Badges -->
<span class="gnb-badge gnb-badge-info">Information</span> 
<span class="gnb-badge gnb-badge-success">Success</span>
<span class="gnb-badge gnb-badge-warning">Warning</span>
<span class="gnb-badge gnb-badge-critical">Critical</span>
<span class="gnb-badge gnb-badge-light">Light</span>
<span class="gnb-badge gnb-badge-dark">Dark</span>

<!-- Badge with .sr-only information  -->
<span class="gnb-badge gnb-badge-critical"><span class="sr-only">Error:</span>Offline</span>

Example

How badges could be used to show status:

Server Status
Bishop Active
Jenkins Offline
Jinx Standby
Kronos Active

Badges as notification

Badges can also be used as notifications to show a value:

Notifications10

HTML

<a href="#">Notifications<span class="gnb-badge gnb-badge-critical">10</span></a>