Badge is a visual chip you drop inline next to a piece of text to classify it:
an environment (production), a status (active), a count (3 failed), a
role (admin). It renders as a <span> with no built-in behaviour, so it’s
safe to place inside buttons, links, table cells, or any flow context.
Reach for Badge when the reader needs to scan and spot a classification at a glance. If the label should do something on click, wrap it in a Button or a link instead — Badge has hover styles but no semantics of its own.
Import
import { Badge } from "@unkey/ui";
Variants
The variant prop selects a semantic color. primary is neutral and the
default. success, warning, and error signal intent. blocked (orange)
calls out a state that’s halted but recoverable. secondary is the lightest
weight, used when the badge should sit quietly next to its label.
Size
sm trims the horizontal padding for tighter contexts like table cells and
breadcrumbs.
Monospace
Set font="mono" when the label is an identifier, a version, or any value
whose exact characters matter. Mono spacing also aligns digits, which reads
cleaner for counts.
Props
variant "primary" | "secondary" | "success" | "warning" | "blocked" | "error" Optional
Default "primary" Visual treatment and semantic color. Pick the intent that matches the state you’re describing, not the hue you want.
size "DEFAULT" | "sm" Optional
Default "DEFAULT" sm reduces horizontal padding. Use inside dense layouts.
font "mono" Optional Switches to the monospace font. Use for identifiers, versions, and counts where column alignment matters.
className string Optional Additional Tailwind classes. Merged with variant classes via cn.
children ReactNode Optional The label. Keep it short — Badge is meant for a word or two, not a sentence.
Related
- Button — when the label needs to do something on click.
- Alert — when the message needs its own block of space and announcement.