Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

Badge

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

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

    Visual style of the badge

    Default'primary'
  • pill
    bool

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

    Defaultfalse
  • bsPrefix
    string

    Overrides underlying component base CSS class name

    Default'badge'

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)