Badge

Badges are used to inform the user of the status of specific data.

Class name
Type
badge Component Container element
badge-outline
Modifier
transparent badge with [colorful] border
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-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
neutral
primary
secondary
accent
ghost
# Outline badge
neutral
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!