Badge

Also known as

Tag, Label, Chip

Similar to

Available since
@salt-ds/core@1.12.0

Resources

Support

Badge is a numeric or alpha character annotation. It appears either in the top-right corner of an element, or inline.

Best practices

  • When a badge is attached to a child component and that component receives focus, the focusable element should have 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.

Previous Page

Avatar

Next Page

Banner