Skip to main content

Badge

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

Anatomy

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

Import

import { Badge } from '@pluralsight/react'

Usage

Filled Badges

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

function FilledBadgeExample() {
  return (
    <Grid cols="repeat(5, 1fr)" gap={8} data-site-override="marginBottom">
      <GridItem>
        <Badge>default filled</Badge>
      </GridItem>

      <GridItem>
        <Badge sentiment="info">info filled</Badge>
      </GridItem>

      <GridItem>
        <Badge sentiment="success">success filled</Badge>
      </GridItem>

      <GridItem>
        <Badge sentiment="warning">warning filled</Badge>
      </GridItem>

      <GridItem>
        <Badge sentiment="danger">danger filled</Badge>
      </GridItem>
    </Grid>
  )
}

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.

function OutlineBadgeExample() {
  return (
    <Grid cols="repeat(5, 1fr)" gap={8} data-site-override="marginBottom">
      <GridItem>
        <Badge usage="outline">default outline</Badge>
      </GridItem>

      <GridItem>
        <Badge sentiment="info" usage="outline">
          info outline
        </Badge>
      </GridItem>

      <GridItem>
        <Badge sentiment="success" usage="outline">
          success outline
        </Badge>
      </GridItem>

      <GridItem>
        <Badge sentiment="warning" usage="outline">
          warning outline
        </Badge>
      </GridItem>

      <GridItem>
        <Badge sentiment="danger" usage="outline">
          danger outline
        </Badge>
      </GridItem>
    </Grid>
  )
}

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.

// import { PlaceholderIcon } from '@pluralsight/icons'

function BadgeWithIcon() {
  return <Badge icon={PlaceholderIcon}>badge with icon</Badge>
}

Sizes

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.

function BadgeSize() {
  return (
    <Grid cols="repeat(12, 1fr)" gap={8} data-site-override="marginBottom">
      <GridItem>
        <Badge size="xs">xs badge</Badge>
      </GridItem>
      <GridItem>
        <Badge size="s">s (default)</Badge>
      </GridItem>
    </Grid>
  )
}

Customizing

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.

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 {
  getBadgeProps,
  getBadgeIconOptions,
} from '@pluralsight/headless-styles'

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

Behavior

Types

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.

States

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.

API

Parameters

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

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

Accessibility

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