Badge
Badge Component
Playground
Badge
Props
| Prop | Type | Default | Value |
|---|---|---|---|
variant | | 'default'
| 'primary'
| 'primaryFilled'
| 'success'
| 'successFilled'
| 'warning'
| 'warningFilled'
| 'danger'
| 'dangerFilled'
| 'outline' | — | |
size | 'sm' | 'md' | 'lg' | — |
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
defaultPrimary
primaryPrimaryFilled
primaryFilledSuccess
successSuccessFilled
successFilledWarning
warningWarningFilled
warningFilledDanger
dangerDangerFilled
dangerFilledOutline
outlineDisabled State
Default (disabled)
default disabledPrimary (disabled)
primary disabledPrimaryFilled (disabled)
primaryFilled disabledSizes
SM
smMD
mdLG
lg