Badge

Badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention.

Install
npm install @pluralsight/ps-design-system-badge
Import
import Badge from '@pluralsight/ps-design-system-badge'

Examples

Color

Badges come in 5 colors and 2 appearances.

Neutral Badge

Neutral Badge (Subtle)

Green Badge

Green Badge (Subtle)

Yellow Badge

Yellow Badge Subtle

Red Badge

Red Badge (Subtle)

Blue Badge

Blue Badge (Subtle)

import Badge from '@pluralsight/ps-design-system-badge'
import React from 'react'

function Example() {
  return (
    <div className="example-grid--col-2">
      <Badge color={Badge.colors.neutral}>Neutral Badge</Badge>
      <Badge color={Badge.colors.neutral} appearance={Badge.appearances.subtle}>
        Neutral Badge (Subtle)
      </Badge>
      <Badge color={Badge.colors.green}>Green Badge</Badge>
      <Badge color={Badge.colors.green} appearance={Badge.appearances.subtle}>
        Green Badge (Subtle)
      </Badge>
      <Badge color={Badge.colors.yellow}>Yellow Badge</Badge>
      <Badge color={Badge.colors.yellow} appearance={Badge.appearances.subtle}>
        Yellow Badge Subtle
      </Badge>
      <Badge color={Badge.colors.red}>Red Badge</Badge>
      <Badge color={Badge.colors.red} appearance={Badge.appearances.subtle}>
        Red Badge (Subtle)
      </Badge>
      <Badge color={Badge.colors.blue}>Blue Badge</Badge>
      <Badge color={Badge.colors.blue} appearance={Badge.appearances.subtle}>
        Blue Badge (Subtle)
      </Badge>
    </div>
  )
}

export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

Props

Name	Type	Description	Default
`appearance`	`default \| subtle`	badge appearance (from Badge.appearances)	`default`
`color`	`neutral \| green \| yellow \| red \| blue`	badge color (from Badge.colors)	`neutral`