Badge

Badge is an alphanumeric annotation. It appears either inline or in the top-right corner of an element.

Also known as: Tag, Label, Chip
Salt package@salt-ds/core
Available since1.12.0
Code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

  • When you've attached a badge to a child component, and that component receives focus, ensure the focusable element has an aria-label or aria-labelledby attribute that describes the badge, such as "9 notifications."
  • When the user navigates to an inline badge, the screen reader automatically announces the contents of the badge. Use aria-label to provide more context to the badge contents if needed.

Accessibility 2.1 disclaimer

Please note that the dot badge indicator in dark mode falls slightly below the minimum contrast requirement of 3:1. This may impact the indicator visibility for users with visual impairments. This issue has been resolved in the JPM Brand theme.