Badge
Badges show the count of some adjacent data. A dot badge notifies the user that something is new or updated without showing a count.
Also known as:
TagChipLabelPillLozenge
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Field
- Checkbox Group
- Collapsible
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Drawer
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Text Area Field
- Text Field
- Tile
- Tile Grid
- Toast Notification
- Toggle Switch
- Tooltip
- Well
Need to know
- For numerical counts, use a badge.
- Use a “pop” animation style when badge numbers increase.
Visuals
UI Kit
Examples
Options
- Known or unknown number:
- Number badge
- Dot badge
To keep in mind
We want to draw attention to a specific value
- The badge text can be a number or a number with text like “10x” for a multiplier
When to use and when not to use
When to use
- Use badges for counts of important information, close to the relevant item.
- A dot badge notifies the user that something is new or updated without showing a count, such as an “unread report”, or activity notification. It may be useful as a less prominent badge, even when the count is known.
- Use badges to notify or draw attention to changed values or status.
- Use a “pop” animation style when badge numbers increase.
When not to use
- If you need a text label, use tags instead
See also
External links
Here are some examples of other existing design systems: