Badge

The Badge component has been designed with accessibility in mind.

The Badge component supports screen readers through the ariaLabel prop. This prop is especially important when:

• The badge contains only an icon
• The content is not sufficient to convey the full meaning
• Additional context would help understand the badge’s purpose

For example:

<Badge ariaLabel="4 passengers" icon={<Icons.Passenger />}>
  4
</Badge>

In this example, while sighted users see the number “4” with a passengers icon, screen reader users hear “4 passengers” which provides the complete context.

As it is announced by screen readers, the content should have meaningful and translated text.

When using icons in badges:

• Provide an ariaLabel if the icon has a meaning by itself that is not obvious to screen readers, regardless of the existence of text
• If the icon is decorative and the badge contains text, the icon should be marked as aria-hidden="true"