Badges come in 6 different flavors that correspond to the default palette. Be sure not to confuse these with buttons. By default badges have rounded corners.
Examples
Use the .pill-badge
class to make the badge more rounded.
Examples
Badges will scale with their parent. In this way they’re a great candidate for inline emphasis.
Examples
Usage
Rules
- Use badges to help indicate status, e.g. “Coming Soon” or “Sale.”
- Badges are not a replacement for buttons as they lack full state support.
- Do not use the default badge shape in the same context as the pill shape.
- Limit the use of badges to one or two per page to increase their impact.
Constraints
- Badges are most commonly applied to inline elements like
<a>
and<span>
. - Badges will inherit the font size from its parent.
- Badge labels should be attributes or descriptions, not actions.
- Badge styles should be used in alignment with their given meaning, i.e. do not use a “danger” style badge with a “Sale!” label.
Principle
- Badges visually emphasize text content for the purpose of drawing attention to a feature or status.
Accessibility
- Do not rely on color alone to convey the meaning of the badge, the label should also provide clarity, e.g. a red badge with a label of “required” enhances the meaning.
Class Names
badge Required |
Apply to the element that should be styled like a badge. |
badge-default Modifier |
Add to the |
badge-primary Modifier |
Add to the |
badge-success Modifier |
Add to the |
badge-info Modifier |
Add to the |
badge-warning Modifier |
Add to the |
badge-danger Modifier |
Add to the |
badge-pill Modifier |
Add to the |
- Last updated February 6, 2017
- Authorable - Yes
- Core - Badges