Grid + Spacing
Modals / Confirmation
Actions & Inputs
Status & Feedback
Badges are used to call attention to an area of the user interface.
Badges are read-only and cannot be used to trigger actions.
Badges are based on sentiment. (Positive and Negative feelings)
- Positive can represent a successful connection or a new feature.
- Negative can represent an unsuccessful connection or deprecated feature
Display connection status of payment provider.
To inform the user about an opportunity to opt-in to an open beta.
To inform the user about a new feature in the context of an app’s navigation.
Max Width: 20 characters
Corner Radius: 4px
Badges should be placed 8px to the right of
an element/name/title or 8px below left aligned.
*Special Use Case*
Source Sans Pro, 12px, Semi-bold, All-Caps
Inactive: Grey 60
Active: Green 50
Warning: Yellow 40; Text = Grey 70
Error: Red 40