Badge

Also known as

Tag, Label, Chip

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

  • 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.