Skip to main content


Used to highlight a category in a non-interactive way for quick recognition.


  1. Container
  2. Icon (optional)
  3. Label


import { Badge } from '@pluralsight/react'


Filled Badges

When a Badge is used in a context where it is the primary focus, it should be used as a filled Badge.

Live Editor

Outline Badges

When a Badge is used in a context where it is not the primary focus, it should be used as an outline Badge. To use an outline Badge, pass the usage prop with the value of outline.

Live Editor

Badge with icon

To add an Icon to a Badge, pass the icon prop with the value of the Icon component you want to use.

Live Editor


To change the size of a Badge, pass the size prop with the value of xs or s. The default size is s. The xs size should only be used as a last resort and should not use an Icon.

Live Editor


There are 3 ways to customize the Badge component.

1. Unused Classes

Each component layer of the Badge has a unused class name that can be utilized in your local CSS to customize the Badge at any level.

  1. pando-badge: The element of the Badge.

2. Passing a className prop

You can pass a className prop to the Badge component to customize the Badge. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

Example of using CSS Modules to customize the Badge.
import customStyles from './customStyles.module.css'

function CustomBadge(props) {
return <Badge className={customStyles.customBadge}>{props.children}</Badge>

3. Ejected Badge

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Badge however you prefer while keeping the accessibility behavior.

import {
} from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.



Do use the filled Badge as the default use case for all badges.

Don't change the color of the Badge.

Do use the outline Badge as the "low priority" use case for a badge.

Don't use the outline Badge as the default use case.


Do use the default size for all use cases where possible of the Badge.

Don't use the "xs" size unless it is a last resort.

Static/Action Scenarios

Do use the Badge as a non-interactive element.

Don't link to new pages, or use any other interactive actions for a Badge.

Do use the sentiment colors or a custom color option.

Don't use any color in the action sentiment theme category.



interface BadgeOptions extends HTMLAttributes<HTMLSpanElement> {
sentiment?: 'default' | 'info' | 'success' | 'warning' | 'danger'
usage?: 'filled' | 'outline'
size?: 'xs' | 's'
  1. Any prop that can be passed to an HTML span element.
  2. sentiment - The color of the Badge. Defaults to default.
  3. usage - The style of the Badge. Defaults to filled.
  4. size - The size of the Badge. Defaults to s.

Size Mapping

Badge size rules.
xs: 'For smaller/tighter experiences where the default size (s) cannot be supported.',
s: 'Should be used in most, if not all cases.'


The Pando Badge, and Icon APIs combined with semantic HTML allow the Badge to be fully accessible and screen-readable by default.