Usage
A badge attaches to an icon or a navigation item to show that something has changed since the person last looked. Use the small badge when the only message is that something is new, and the large badge when the count itself matters.
- Use the small badge for a single unread or new item.
- Use the large badge when the number carries the meaning, such as a count of unread items.
- Give a badge its own touch target. The icon it sits on owns the touch target and the action.
- Use a badge to carry a message on its own. It signals that something changed, not what changed.
Design properties
| Property | Values | Default |
|---|---|---|
| Type Variant | Small | Large | Small |
Types
Small
8dp×8dp. Use to show that something is new or unread, with no count. An outer border separates it from the icon beneath.
Large
16dp×16dp. Use when the number itself matters, such as a count of unread items.
Behavior and interaction
Behavior
- A badge is not interactive. The icon it sits on owns the touch target and the action.
- The small badge shows that something is new. The large badge shows a count.
Positioning
- Position the badge in the top trailing corner of the icon’s 24×24dp bounding box.
- The small badge sits 1dp outside that box on the top and trailing edges.
- The large badge sits 4dp outside on the top and 6dp outside on the trailing edge.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Oct 7, 2025 |
1.0.0 |
Initial draft of guidance |