Skip to main content
Web
iOS
Android
Getting started
Status
Release notes
GitHub
Styles
Colors
Icons
Illustrations
Typography
Components
Alert
Button
Card
Checkbox
Dropdown Menu
Dropdown Picker
Progress bar
Radio
Select
Skeleton
Spinner
Text input
Textarea
Tile
Legacy components
Avatar
Badge
Datepicker
Expansion panel
Modal
Pill
Right drawer
Rule
Sheet modal
Stepper
Tooltip
Badge
Status:
Unplanned
UI elements that relate the status or numerical count of a related object.
Page sections
Types
Usage
Behavior
Visual style
Types
Numeric badge
Status badge
Usage
Numeric badge
Display numeric badge when there is one or more new items
Do not use the numeric badge if there are no new items
Status badge
Use the status badge to note when something has been applied, such as a filter
Behavior
Numeric badge
Numeric badge values above 9 should be “9+”
Avoid numeric badges that have more than one numeral
Visual style
Numeric badge
When used on an icon for notifications, display numeric badges at the top right of the icon
When used inline, include at least 8px spacing around the numeric badge
Status badge
Include at least 4px spacing around the status badge
↑ Back to top