Badge

A small status label for categorizing, labeling, or indicating the status of items.

Variants

DefaultSecondaryDestructiveOutlinePositiveCautionInformativeImportant

Usage

New

Installation

Props

Extends all standard HTMLDivElement props.

PropTypeDefaultDescription
variant
"default" | "secondary" | "destructive" | "outline" | "positive" | "caution" | "informative" | "important""default"The visual style of the badge.
size
"default" | "microdot""default"Sizing; "microdot" renders a tiny status dot.
removable
booleanfalseRenders a trailing remove button.
onRemove
() => voidCalled when the remove button is clicked.