Badge

A small status badge with multiple variants.

bun x bosia@latest add badge

A small status label with variant styling.

Preview

Default

Secondary

Destructive

Outline

Props

Prop	Type	Default
`variant`	`"default"` \| `"secondary"` \| `"destructive"` \| `"outline"`	`"default"`

Usage

<script lang="ts">
	import { Badge } from "$lib/components/ui/badge";
</script>

<Badge>Active</Badge>
<Badge variant="secondary">Pending</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Draft</Badge>