COMPONENTS
Badge
A badge is a highly visual way to draw attention to content.
Badges help to categorize information, spotlight a notification, or indicate status.
- Label
- Container
There are three core types of badges — basic, inline and overlay.
Badge has three types of emphasis — bold, subtle, or outlined, with bold being the default.
Within each emphasis type there are 13 color options — gray, red, orange, yellow, lime, green, teal, turquoise, aqua, blue, ultramarine, purple, and pink.
Badge has five display options to indicate status — none, error, warning, information, success.
Badge has two shapes — square and rounded.
Uppercase is the preferred text style, but apps can customize based on their use case.
Badge can be displayed in large, medium, small and x-small sizes.
- Users cannot interact with badges. If interaction is desired, use a Tag.
- Only include one label per badge.
- Keep label text concise and unambiguous.
DO: Use a limited color palette to help to reinforce meaning and highlight important status information.
DON'T: Use too many colors in one interface. It negates the effectiveness of a badge and creates visual noise.
Contents