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 element to style the badge with the default text color as the solid background.

badge-primary
Modifier

Add to the badge element to style the badge with the primary color as the solid background.

badge-success
Modifier

Add to the badge element to style the badge with the brand success color as the solid background.

badge-info
Modifier

Add to the badge element to style the badge with the brand info color as the solid background.

badge-warning
Modifier

Add to the badge element to style the badge with the brand warning color as the solid background.

badge-danger
Modifier

Add to the badge element to style the badge with the brand danger color as the solid background.

badge-pill
Modifier

Add to the badge element to increase the radius on the badge corners.


  • Last updated February 6, 2017
  • Authorable - Yes
  • Core - Badges