Badge

Badges can be used to highlight new or unread items, Limited usage is recommended, mainly for displaying numeric values in combination with other data to provide context. Do not use in place of labels, or any other similar element.

123

Basic usage

Twig

{{
    html.badge({
        'label': '123'
    })
}}

React

<Badge>123</Badge>

HTML

<span class="badge">123</span>

Accessibility

Badges strongly rely on the context in which they’re presented to properly communicate what the badge means. You should not rely on colour alone to indicate what a badge means.

Ideally, treat badges as a secondary piece of information, which is visually associated with an obvious text label, or a screenreader friendly label.

Twig

{{
  html.button({
    'label': 'Notifications ' ~
      html.badge({
        'label': '7'
      })
  })
}}

React

<Button>
  Notifications <Badge>7</Badge>
</Button>

HTML

<button class="btn">Notifications <span class="badge">7</span></button>

Screenreader friendly labels

Badges may be confusing to users of screen readers and other assistive technologies where they may not be able to rely on visual cues or positioning to judge the context of the numbers.

Unless an associated text label is close enough to make it clear what the badge is counting, such as ‘Notifications (8)’, consider adding additional information with a visually hidden label.

Twig

{{
  html.badge({
    'label': '7 <span class="hide">unread items</span>',
    'class': 'badge--danger'
  })
}}

React

<Badge>7 <span className="hide">unread items</span></Badge>

HTML

<span class="badge badge--danger">7 <span class="hide">unread items</span></span>