components
Badge
v.1.0.0 | SaturnVisual indicator for pending tasks or messages.
Components
Play with the component with our playground.
[CODE]
Anatomy
| Name | Description |
|---|---|
1 Required | The icon may change depending on the design or theme. |
2 | width |
3 | Indicates a number of unread notifications. Include all variant of _dot_. |
4 | The icon may change depending on the design or theme. |
States
Collapsed
When the component is collapsed, the color is dark and the chevron is down.
- Regular
- Alternative
Expanded
When the component is expanded, the color is red and the chevron is up.
- Regular
- Alternative
Options
Simple
With label
With dot
With dot and label
Sizes
Default
Large
Behaviours
- Flexible notifications
If there are more than two digits, just add a “+99” reference.
- Flexible label
- Notifications
Indicates the number of unread or unopened notifications. The dot/number never disappears until the user read them.
Do's and dont's
If the number exceeds two figures (eg: up to 99), a plus will be added to the number (eg: +99).
Do not exceed two figures.
Respect the color of the notifications.
Do not use other color than the established.
Label must be one word.
The label must not exceed two lines. Just one word.
Respect the established colors.
Do not change de colors established.