Badge
A short label stuck on something: a small slab cut on both sides, in small leaning capitals.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/badgeExamples
Four variants and an icon
RushHarborDraftLateLocked
import { Badge } from "@/components/zero/badge";import { LockIcon } from "@/components/zero/icons";export default function BadgeVariants() { return ( <div className="flex flex-wrap items-center gap-3"> <Badge>Rush</Badge> <Badge variant="secondary">Harbor</Badge> <Badge variant="outline">Draft</Badge> <Badge variant="danger">Late</Badge> <Badge variant="secondary"> <LockIcon /> Locked </Badge> </div> );}Behaviour
The accent for what matters, the raised grey for the ordinary, a black well with a quiet outline for the quiet, red for danger. An icon goes before the word.
render turns it into a link or any other element; as a link it lightens on hover and takes the focus frame.
Props
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "danger" | "default" | Its fill. |
| render | ReactElement | — | The element to render as, such as a link. |