Badge
A component displays small labels, counters, or status indicators in a compact, visually distinct format.
View source
badge
<script lang="ts">
import { Badge } from 'svxui';
</script>
<Badge>badge</Badge>API Reference
| Property | Type | Default | Description |
|---|---|---|---|
children Snippet | Snippet<[void]> | Badge content to render | |
color | string | number | symbol | "neutral" | Color of badge |
disabled | boolean | false | Disable badge |
elementRef $bindable | HTMLSpanElement | Rendered DOM element | |
radius | union | Radius of badge | |
size | union | "1" | Size of badge |
variant | union | "solid" | Variant of badge |
Examples
Colors
neutral blue green yellow orange red
Variants
solid soft outline
Sizes
size 1 size 2 size 3 1 2 3
States
default disabled