Badge

Rounded-rect label for status and metadata, with tinted status variants, an optional dot and asChild support.

BadgeBetaOutlineReady

Installation

$npx shadcn@latest add @reziui/badge

Badges are rounded rectangles on purpose: in Rezi UI every pill-shaped element is a Button, so a pill badge would read as clickable.

Usage

app/page.tsx

import { Badge } from "@/components/ui/badge";

export function Example() {
  return <Badge variant="success">Active</Badge>;
}

Examples

Variants

BadgeOutlineActivePendingBetaFailed

Variant	Use for
`default`	General metadata — counts, categories, "New".
`outline`	Metadata on busy surfaces — versions, branches, tags.
`success`	Healthy or finished states.
`warning`	States that need attention but are not failing.
`info`	Neutral notices such as "Beta" or "Queued".
`destructive`	Failed or blocked states.

Every variant is a tint with a 1px ring, so badges read as one family. There is no brand-blue badge on purpose: in Rezi UI that blue means "interactive" (buttons, links, focus), so a blue label would look clickable — use info for informational status. All text clears 4.5:1 in both themes.

With a dot or icon

ReadyBuildingFailed

ReadyBuildingQueuedFailed

dot adds a small indicator in the badge's text color. pulse adds a ring that radiates from the dot — keep it for states that are genuinely in progress (Building, Live), so the motion carries meaning; it stays still under reduced motion and the label still states the status. For an icon, place it before the label; the leading padding shrinks to balance the icon's whitespace.

code

<Badge variant="warning" dot>
  Building
</Badge>

Sizes

v1.4.0Default

Size	Height	Notes
`sm`	18px	Dense rows — table cells, inline metadata.
`default`	20px	Standalone labels.

As a link

Button Changelog

With asChild, the badge styles the child element and gains a hover state. Static badges never react to the pointer.

API reference

Prop	Type	Default
`variant`	`"default" \| "outline" \| "success" \| "warning" \| "info" \| "destructive"`	`"default"`
`size`	`"sm" \| "default"`	`"default"`
`dot`	`boolean`	`false`
`pulse`	`boolean`	`false`
`asChild`	`boolean`	`false`

All native <span> props are forwarded.