Badge
A square status tag in the label face. Spark is for the one thing that needs seeing; outline and neutral stay quiet.
Variant
Spark
Controls
▾
Code
import { Badge } from "@/components/ui/kit/ui";
<Badge variant="spark" dot>Spark</Badge>Every state
NeutralSparkOutline
Usage
Tokens it uses
| --panel | … |
|---|---|
| --line | … |
| --line-2 | … |
| --muted | … |
| --spark | … |
| --spark-tint | … |
| --spark-deep | … |
| --font-label | … |
Values are read live from the stylesheet, so they follow the site theme.