Components
Badge
A short label attached to something else. Not an action — for interactive pills, use Button size xs.
When to useto attach a state or category to another element — row status, list counts, feature flags.
Import
import { Badge } from "@ravnhq/efni/badge"Variants
DefaultSecondaryOutlineDestructiveGhost
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="ghost">Ghost</Badge>With icon
VerifiedLive
<Badge><Icon icon={Check} />Verified</Badge>
<Badge variant="outline"><Icon icon={Zap} />Live</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "default" | Visual style of the badge. |
…props | useRender.ComponentProps<"span"> | — | Everything Badge passes to the element it renders. |