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 |
| badge appearance (from Badge.appearances) | blue |
color |
| badge color (from Badge.colors) | blue |