Badge
Badges are used to inform the user of the status of specific data.
| Class name | Type | |
|---|---|---|
| badge | Component | Container element |
| badge-neutral | Modifier | badge with `neutral` color |
| badge-primary | Modifier | badge with `primary` color |
| badge-secondary | Modifier | badge with `secondary` color |
| badge-accent | Modifier | badge with `accent` color |
| badge-ghost | Modifier | badge with `ghost` color |
| badge-info | Modifier | badge with `info` color |
| badge-success | Modifier | badge with `success` color |
| badge-warning | Modifier | badge with `warning` color |
| badge-error | Modifier | badge with `error` color |
| badge-outline | Modifier | transparent badge with [colorful] border |
| badge-lg | Responsive | badge with large size |
| badge-md | Responsive | badge with medium size (default) |
| badge-sm | Responsive | badge with small size |
| badge-xs | Responsive | badge with extra small size |
# Badge
Badge
# Badge with brand colors
default
neutral
primary
secondary
accent
ghost
# Outline badge
default
primary
secondary
accent
# Badge sizes
987,654
987,654
987,654
987,654
# Empty badge
# Badge with state colors
info
success
warning
error
# Badge in a text
Heading NEW
Heading NEW
Heading NEW
Heading NEW
# Badge in a button
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development:
Open Collective
