Installation
Barrel
import { Badge } from 'kumo-svelte';Granular
import { Badge } from 'kumo-svelte/components/badge';Usage
<script lang="ts"> import { Badge } from 'kumo-svelte';</script><Badge variant="secondary">New</Badge>Examples
Primary Badges
Other variants
Other variants for specific products/use cases where the semantic badges aren't enough to convey intended meaning or status.
Dot appearance
Use appearance="dot" with success, warning, error, or neutral variants to show a compact status indicator.
In a sentence
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'destructive' | 'info' | 'beta' | 'outline' | 'red' | 'green' | 'neutral' | 'orange' | 'purple' | 'teal' | 'teal-subtle' | 'blue' | "primary" | Visual variant. |
| appearance | 'filled' | 'dot' | "filled" | Visual appearance. Dot renders an outlined badge with a small status indicator for success, warning, error, or neutral variants. |
| class | string | - | Additional classes merged onto the root element. |
| children * | Snippet | - | Content rendered inside the badge. |