Badge

A small status descriptor for UI elements.

displayprimitive

Loading preview...

Installation

npx baseui-cn add badge

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

<Badge variant="success">Active</Badge>

Includes default, semantic, and outline badge variants.

Loading preview...

sm, default, and lg sizes.

Loading preview...

Use shape="pill" for fully rounded badges.

Loading preview...

Prop	Type	Default	Description
`variant`	`"default" \| "primary" \| "primary-outline" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "success" \| "success-outline" \| "warning" \| "warning-outline" \| "info" \| "info-outline"`	`"default"`	Color and fill style of the badge
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Height and font-size of the badge
`shape`	`"default" \| "pill"`	`"default"`	Border-radius — `"default"` is `rounded-md`, `"pill"` is fully rounded