Badge

CCone King7 daysFastNeeds reviewNo signalDraft

Installation

pnpm dlx shadcn@latest add @paneui/badge

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

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

Put an icon first when the badge marks a status or category.

Also accepts every prop of span.

variant= "chip": "chip" | "primary" | "success" | "warning" | "destructive" | "outline"; Visual style. chip is neutral; the tinted variants carry status.
size= "default": "default" | "sm"; Height, padding and text size. default is 28px tall and sm 20px; icons are 14px, or 12px at sm.
render: ReactElement | (props, state) => ReactElement; Replace the rendered <span>, e.g. with <a /> or a router Link.

Prop	Type	Default	Description
variant	"chip" \| "primary" \| "success" \| "warning" \| "destructive" \| "outline"	"chip"	Visual style. `chip` is neutral; the tinted variants carry status.
size	"default" \| "sm"	"default"	Height, padding and text size. `default` is 28px tall and `sm` 20px; icons are 14px, or 12px at `sm`.
render	ReactElement \| (props, state) => ReactElement	—	Replace the rendered `<span>`, e.g. with `<a />` or a router `Link`.

Small round mark at the start of a badge, e.g. a vendor initial. Also accepts every prop of span.

The cva function behind Badge, for styling other elements like a badge.

Prop	Type	Default	Description
variant	same as Badge	—
size	same as Badge	—