How they help
Badges enhance a UI by providing visual cues that improve user interaction and experience. They draw attention to important information, such as notifications or updates ensuring users don't miss critical details.
As status indicators, they convey the state of items like availability, priority, or completion, allowing users to understand various elements immediately. Badges also aid in categorizing and labeling content, facilitating easier navigation and helping users find relevant information efficiently.
Example of badges
Anatomy
- Container: holds interchangeable content
- Icon: optional visual to help give clarity to user
- Text: clear and concise text giving the user insight into the content
Visual reference for anatomy
Variants
There are 3 variants of the component: text only, icon only and icon with text. You can use any variation, but make sure to keep consistent throughout the experience.
Visual of badge variants
Designer resources