Badge
Badge Component
Playground
Badge
Props
| Prop | Type | Default | Value |
|---|---|---|---|
variant | | 'default'
| 'outline'
| 'primary'
| 'danger'
| 'success'
| 'primaryFilled'
| 'successFilled'
| 'warning'
| 'warningFilled'
| 'dangerFilled' | — | |
size | CommonSize | — | — |
Usage
// Subtle container background (default)
<Badge variant="success">Active</Badge>
// Solid filled background for emphasis
<Badge variant="successFilled">Active</Badge>
<Badge variant="danger" size="sm">Error</Badge>Variants
Style Variants
Default
defaultOutline
outlinePrimary
primaryDanger
dangerSuccess
successPrimaryFilled
primaryFilledSuccessFilled
successFilledWarning
warningWarningFilled
warningFilledDangerFilled
dangerFilledDisabled State
Default (disabled)
default disabledOutline (disabled)
outline disabledPrimary (disabled)
primary disabled