Badge
Badges are a visual extension which communicate and elevate a specific message. They are often used to display targeted offers and status’ to create excitement and engagement.
Props
Context
Subtypes used differently depending on the type of message they convey.
Label
Label text for the button. Recommended: 1-2 words.
Icon
Defines a icon and its visiblity. Uses 16-icons.
Background
Surface colour is removed. Used sparingly.
Interactive
Defines the badge's explanatory state, which can optionally initiate user interaction (contextual action).
Usage
Do
- Badge should be short, simple and limited to one or two words.
- Only one badge should be attached to any single object or component.
