Badge Example

Displays a colored badge.

Badge

Secondary

Outline

Destructive

Custom Hex

Custom HSL

Custom RGB

How to use these badges

Props

Name	Type	Default	Description
variant	enum ("default" \| "secondary" \| "warning" \| "destructive" \| "outline")	"default"	This changes the badge color.

Playground

Import from filigran-ui :

Import {Badge} from 'filigran-ui'


          <div className={tw(`flex gap-2`)}>
            <Badge>Badge</Badge>
            <Badge variant="secondary">Secondary</Badge>
            <Badge variant="warning">Secondary</Badge>
            <Badge variant="outline">Outline</Badge>
            <Badge variant="destructive">Destructive</Badge>
            <Badge style={{color: '#c73220'}}>Custom Hex</Badge>
            <Badge style={{color: 'hsl(24, 12%, 68%)'}}>Custom HSL</Badge>
            <Badge style={{color: 'rgb(183, 171, 232)'}}>Custom RGB</Badge>
          </div>