Notifications (Dotted Badge)
Dotted badges notifies the user that something is new or has been updated.
Variants
Dot
/Dotted%20Badge%20Variant.png)
| Variant | Usage |
|---|---|
|
Dot |
Used to indicate that a certain feature is new or has been updated. |
Anatomy
Dotted Badges are 8px by 8px circles that are typically accompanied by other components.
/Dotted%20Badge%20Anatomy.png)
Size
Dotted Badges are always 8px by 8px.
/Dotted%20Badge%20Size.png)
Behavior
Use to indicate a new message or feature. Once tapped on it will disappear.
/Dotted%20Badge%20Behavior.png)
Dos and Don'ts
/Dotted%20Badge%20Do.png)
Keep dotted badge near the top right side of the button and use it only on the page where the entry point is
/Dotted%20Badge%20Don%27t.png)
Use multiple badges to lead customers into a deeper level and find that page.