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>