Paragon Design System

Technical Documentation

Theme

npm_versionnpm Paragon package page

Badge

Edit this pagein a new tabLeave feedbackin a new tab

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

Any Paragon component or export may be added to the code example.

Theme Variables (SCSS)#

$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;
$badge-pill-border-radius:           10rem !default;

Props API#

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'

Usage Insights#

Badge

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.46.317
frontend-app-authn20.46.21
frontend-app-course-authoring20.46.29
frontend-app-discussions20.44.03
frontend-app-ecommerce20.46.22
frontend-app-enterprise-public-catalog20.46.314
frontend-app-learner-dashboard20.46.25
frontend-app-learner-portal-enterprise20.45.417
frontend-app-learner-record20.46.35
frontend-app-learning20.46.01
frontend-app-library-authoring21.5.62
frontend-app-ora-grading20.46.31
frontend-app-payment20.46.21
frontend-app-publisher20.46.21
frontend-app-support-tools20.46.04
frontend-component-header-edx21.5.62
catalog-search20.45.03
frontend-lib-content-components21.5.62
prospectus20.46.28
Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)