Badges are composed of text and an accompanying indicator color, and are typically used to add meaning, status, or context when paired with another component.

  • Use badges paired with another component to convey status, or provide additional details
  • Don’t use badges for freestanding text on a page

This is a pass through component from React-Bootstrap.
See React-Bootstrap for additional documentation.

Basic Usage

Theme Variables (SCSS)#

// Badges
$badge-font-size: 75% !default;
$badge-font-weight: $font-weight-bold !default;
$badge-padding-y: .125rem !default;
$badge-padding-x: .5rem !default;
$badge-border-radius: .25rem !default;
$badge-transition: none !default;
$badge-focus-width: $input-btn-focus-width !default;
$badge-pill-padding-x: .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius: 10rem !default;
Badge Props API
  • as elementType

    Specifies element type for this component

  • variant enum'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'

    Visual style of the badge

  • pill bool

    Add the pill modifier to make badges more rounded with some additional horizontal padding

  • bsPrefix string

    Overrides underlying component base CSS class name