Badge
A small status chip. There's no HTML element for "badge",<span> is the honest choice for an inline, semantically neutral run of text that only needs presentational styling, one of the rare cases here without a more specific native anchor.
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
Active
Unstyled
Same component — Kernel look stripped. See Platforms.
variant
Usage
<Badge>Active</Badge><kernel-badge>Active</kernel-badge>Props
| Prop | Type | Default |
|---|---|---|
variant | "neutral" | "accent" | "success" | "warning" | "danger" | "neutral" |