Badge

Examples

Color

Badges come in 5 colors and 2 appearances.

Gray Badge
Gray 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.gray}>Gray Badge</Badge>
<Badge color={Badge.colors.gray} appearance={Badge.appearances.subtle}>
Gray 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

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-badge
  • Import
    import Badge from '@pluralsight/ps-design-system-badge'
Name
Type
Description
Default
appearance
default | subtle
badge appearance (from Badge.appearances)
blue
color
gray | green | yellow | red | blue
badge color (from Badge.colors)
blue