Badge
Badge
Badge
is a numeric or alpha character annotation. It appears either in the top-right corner of an element, or inline.
Examples
How to use
Accessibility
- When a badge is attached to a child component and that component receives focus, the focusable element should have an
aria-label
oraria-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.
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 Salt Next.