Badge
Badge is used to highlight an item's status or count.
Installation
npx jsx-daisyui add badgeDefault
badge-default
Badge
Colors
badge-colors
NeutralPrimarySecondaryAccentInfoSuccessWarningErrorGhost
Variants
badge-variants
OutlineOutlineOutline
SoftSoftSoft
DashDashDash
Sizes
badge-sizes
XSmallSmallMediumLargeXLarge
In text
badge-in-text
Inbox 4
New features Live are now available.
Props
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
color | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | - | The color of the badge. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | The size of the badge. |
variant | 'outline' | 'dash' | 'soft' | - | The visual style variant of the badge. |