Badge
A compact label for status, counts, and lightweight metadata.
The Badge Component
Components Ready to ship Needs review View rollout
Basic Usage
Code Snippet
<script lang="ts"> import { Badge } from '$lib/components'; </script> <Badge role="success" variant="pill-color">Ready to ship</Badge>Examples
Badge
Default badge styling across all roles.
Primary Secondary Tertiary Success Warning Danger
Pill
Rounded pill styling across all roles.
Primary Secondary Tertiary Success Warning Danger
Badge Color
Filled badge styling across all roles.
Primary Secondary Tertiary Success Warning Danger
Pill Color
Filled pill styling across all roles.
Primary Secondary Tertiary Success Warning Danger
Modern
Modern styling across all roles.
Primary Secondary Tertiary Success Warning Danger