Badge
A badge is a visual label or indicator used to convey status or highlight content.
Download CSS for BadgesDirect Dependencies:
bootstrap.bundle.min.js
root.css
colors.css
typography.css
grid.css
utilites.css
When to use
Badges and tags are visually similar, but tags are interactive and badges are not.
| Component | Use cases |
|---|---|
| Badge | The badge component indicates a status or count. Badges are read-only status indicators or labels and are not interactive. |
| Tag | Use tags to allow users to group, sort, or filter information. Tags frequently contain keywords or metadata. They provide quick access to specific categories and support content classification and navigation. |
Usage
Use a badge to indicate status, item count, items requesting attention, or featured content. Badges should not rely on color alone to convey meaning (see the section on color), as color is not a universal experience for everyone. Combining multiple elements — text and color emphasis in each badge can optimize visual understanding.
It is recommended you use semantic colors for statuses.
Possible Badges Examples
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example paragraph New
Primary
Secondary
Success
Danger
Light
Dark