Badge
Status chip with optional pulsing live dot.
LIVEROUTINGACCEPTEDTTFT 307MSREJECTEDSPARSE 34%
Source
"use client"
import { Badge } from "@/registry/warren/badge/badge"
export default function BadgeDemo() {
return (
<>
<Badge variant="live" dot>
LIVE
</Badge>
<Badge variant="primary" dot>
ROUTING
</Badge>
<Badge variant="success" dot>
ACCEPTED
</Badge>
<Badge variant="warning" dot>
TTFT 307MS
</Badge>
<Badge variant="danger" dot>
REJECTED
</Badge>
<Badge variant="outline">SPARSE 34%</Badge>
</>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/badge.jsonUsage
import { Badge } from "@/components/ui/badge"<Badge variant="success" dot>
ACCEPTED
</Badge>Variants
default · outline · primary · success · warning · danger · live
Signal-colored text always uses the text-grade tokens (AA on cream); the saturated tone is
reserved for the border and dot. live is the danger border/text pair with a pulsing red square dot.
Sizes
MAX 9MAX 9
Source
"use client"
import { Badge } from "@/registry/warren/badge/badge"
export default function BadgeSizes() {
return (
<>
<Badge size="sm" variant="outline">
MAX 9
</Badge>
<Badge size="md" variant="outline">
MAX 9
</Badge>
</>
)
}
API Reference
Prop
Type