Badge
Badge Component
Playground
Default
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| variant | selectdefault | primary | success | warning | danger | info | outline | soft | ghost | — | |
| size | selectxs | sm | md | — | |
| pill | boolean | — |
DefaultDefault
PrimaryPrimary
SuccessSuccess
AllVariants
DefaultPrimarySuccessWarningDangerInfo
AllSoftVariants
SoftOutlineGhost
PillShape
NewActiveUrgentPending
Sizes
XSmallSmallMedium
WithIcon
✅Verified🔴Criticalℹ️Info
WarningWarning
DangerDanger
InfoInfo
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
pill | boolean | — | Render as pill shape |
size | select | — | Badge size |
variant | select | — | Badge visual variant |
Using Badgetsx
import { Badge } from '@/components/Badge'
<Badge
variant="..."
size="..."
pill="..."
/>Tokens Used
No design tokens detected