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

# Empty badge

# Badge with state colors

info

success

warning

error

# Badge in a text

Heading NEW

# Badge in a button

Do you have a question? ask the community

Do you like daisyUI? tweet about it!

Support daisyUI's development: Open Collective