Badge
Visual indicators that communicate the status of a component.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Label badges
- Avoid using label badges alone to convey information.
- Always place icon badges near their associated labels to convey information through visible text.
- Avoid labeling icons individually or giving them screen reader focus, as this creates redundancy. Screen reader focus should wrap the icon and the label, reading the label information, e.g., ”! Out of stock”.
Icon badges
- Use an
to communicate an accessible name.