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

Show editable code example

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

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="light">Light</Badge>
      <Badge variant="dark">Dark</Badge>
    </Stack>
)}

() => {
  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });

  return (
    <Stack gap={2} direction={ isExtraSmall ? "vertical" : "horizontal" }>
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="light">Light</Badge>
      <Badge variant="dark">Dark</Badge>
    </Stack>
)}

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 Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.26.3	13
frontend-app-course-authoring	20.32.0	4
frontend-app-discussions	20.15.0	3
frontend-app-enterprise-public-catalog	20.29.0	14
frontend-app-learner-dashboard	20.32.0	2
frontend-app-learner-portal-enterprise	20.31.1	17
frontend-app-learner-record	20.32.0	5
frontend-app-learning	20.28.4	1
frontend-app-library-authoring	20.30.1	2
frontend-app-ora-grading	20.30.0	1
frontend-app-publisher	20.28.5	1
frontend-app-support-tools	20.26.0	3
catalog-search	19.25.1	3
frontend-lib-content-components	20.32.0	2
prospectus	20.32.3	6

Paragon Design System

Theme

PlaygroundBeta

Badge

Basic Usage

Theme Variables (SCSS)#

Props API#

Usage Insights#

Badge

All components (A-Z)

Theme

PlaygroundBeta

Badge

Basic Usage#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Badge

All components (A-Z)

Basic Usage