components · data-display
Badge
Status indicator or category label
preview
default
variants
default
default
border-transparent bg-primary text-primary-foregroundvariant="default"secondary
secondary
border-transparent bg-secondary text-secondary-foregroundvariant="secondary"success
success
border-transparent bg-success text-whitevariant="success"error
error
border-transparent bg-error text-whitevariant="error"outline
outline
text-foregroundvariant="outline"sizes
default
sm
text-xs px-2 py-0.5size="sm"default
md
text-sm px-2.5 py-0.5size="md"default
lg
text-base px-3 py-1size="lg"usage
<Badge variant="default">Badge</Badge>props
| prop | type | default |
|---|---|---|
| variant | "default" | "secondary" | "success" | "error" | "outline" | "default" |
| size | "sm" | "md" | "lg" | "sm" |
| className | string | undefined |