Badge

Semantic variants — all colors resolve to theme tokens (see layout.css), so this is the single place any badge color is decided.

Prefer a variant name over ad-hoc color classes on the call site.

Feedback

<script lang="ts">
	import { Badge } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
variant	Variant	'default'	Semantic, not decorative: pick by meaning and both themes follow.
class	string	—	Merged with the component's own classes, last — so yours win.
children required	Snippet	—	The content.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Badge>default</Badge>
<Badge variant="secondary">secondary</Badge>
<Badge variant="outline">outline</Badge>
<Badge variant="success">online</Badge>
<Badge variant="warning">degraded</Badge>
<Badge variant="destructive">failed</Badge>

Feedback · Alert · Progress · Spinner · Skeleton · Toaster · Avatar · Image

---

← All components · Getting started · Theming · source