Badge

Small status indicators for UI elements

Basic

Basic Badge

Default badge configuration

Preview Code Auto

Badge

Span("Badge", cls="badge")

Color Variants

Brand Colors

Badges using DaisyUI's theme colors

Preview Code Auto

PrimarySecondaryAccentNeutralInfoSuccessWarningError

Span("Primary", cls="badge badge-primary")
Span("Secondary", cls="badge badge-secondary")
Span("Accent", cls="badge badge-accent")
Span("Neutral", cls="badge badge-neutral")
Span("Info", cls="badge badge-info")
Span("Success", cls="badge badge-success")
Span("Warning", cls="badge badge-warning")
Span("Error", cls="badge badge-error")

Size Variants

Badge Sizes

Preview Code Auto

987,654

Div("987,654", cls="badge badge-xl")
Div("987,654", cls="badge badge-lg")
Div("987,654", cls="badge badge-md")
Div("987,654", cls="badge badge-sm")
Div("987,654", cls="badge badge-xs")

Style Variants

Outline Badges

Border-only badges with transparent fill

Preview Code Auto

PrimarySecondaryAccentNeutralInfoSuccessWarningError

Span("Primary", cls="badge badge-outline badge-primary")
Span("Secondary", cls="badge badge-outline badge-secondary")
Span("Accent", cls="badge badge-outline badge-accent")
Span("Neutral", cls="badge badge-outline badge-neutral")
Span("Info", cls="badge badge-outline badge-info")
Span("Success", cls="badge badge-outline badge-success")
Span("Warning", cls="badge badge-outline badge-warning")
Span("Error", cls="badge badge-outline badge-error")

Soft Badges

Preview Code Auto

PrimarySecondaryAccentNeutralInfoSuccessWarningError

Span("Primary", cls="badge badge-soft badge-primary")
Span("Secondary", cls="badge badge-soft badge-secondary")
Span("Accent", cls="badge badge-soft badge-accent")
Span("Neutral", cls="badge badge-soft badge-neutral")
Span("Info", cls="badge badge-soft badge-info")
Span("Success", cls="badge badge-soft badge-success")
Span("Warning", cls="badge badge-soft badge-warning")
Span("Error", cls="badge badge-soft badge-error")

Dashed Badges

Preview Code Auto

PrimarySecondaryAccentNeutralInfoSuccessWarningError

Span("Primary", cls="badge badge-dash badge-primary")
Span("Secondary", cls="badge badge-dash badge-secondary")
Span("Accent", cls="badge badge-dash badge-accent")
Span("Neutral", cls="badge badge-dash badge-neutral")
Span("Info", cls="badge badge-dash badge-info")
Span("Success", cls="badge badge-dash badge-success")
Span("Warning", cls="badge badge-dash badge-warning")
Span("Error", cls="badge badge-dash badge-error")

Ghost Badges

Preview Code Auto

Ghost

Span("Ghost", cls="badge badge-ghost")

Icon Badges

Preview Code Auto

InfoSuccessWarningError

Span(Icon.info(cls="size-[1em]"), "Info", cls="badge badge-info"),
Span(Icon.success(cls="size-[1em]"), "Success", cls="badge badge-success"),
Span(Icon.warning(cls="size-[1em]"), "Warning", cls="badge badge-warning"),
Span(Icon.error(cls="size-[1em]"), "Error", cls="badge badge-error"),

Usage Examples

Empty State

Badges without text (for indicators)

Preview Code Auto

Div(cls="badge badge-primary badge-lg")
Div(cls="badge badge-primary badge-md")
Div(cls="badge badge-primary badge-sm")
Div(cls="badge badge-primary badge-xs")

Text Integration

Badges used within heading elements

Preview Code Auto

Heading 1New

Heading 2New

Heading 3New

Heading 4New

Heading 5New

ParagraphNew

H1('Heading 1', Span('New', cls='badge badge-accent badge-xl'), cls='text-xl font-semibold flex gap-1')
H2('Heading 2', Span('New', cls='badge badge-accent badge-lg'), cls='text-lg font-semibold flex gap-1')
H3('Heading 3', Span('New', cls='badge badge-accent badge-md'), cls='text-base font-semibold flex gap-1')
H4('Heading 4', Span('New', cls='badge badge-accent badge-sm'), cls='text-sm font-semibold flex gap-1')
H5('Heading 5', Span('New', cls='badge badge-accent badge-xs'), cls='text-xs font-semibold flex gap-1')
P('Paragraph', Span('New', cls='badge badge-accent badge-xs'), cls='text-xs flex gap-1')

Button Integration

Badges used within button components

Preview Code Auto

Button('Inbox', Div('+99', cls='badge badge-sm'), cls='btn')
Button('Inbox', Div('+99', cls='badge badge-sm badge-secondary'), cls='btn')

Class Reference

Class	Type	Description
badge	Component	Base badge class
badge-outline	Style	Outline style variant
badge-dash	Style	Dash outline style variant
badge-soft	Style	Soft style variant
badge-ghost	Style	Ghost style variant
badge-neutral	Color	Neutral color variant
badge-primary	Color	Primary color variant
badge-secondary	Color	Secondary color variant
badge-accent	Color	Accent color variant
badge-info	Color	Info color variant
badge-success	Color	Success color variant
badge-warning	Color	Warning color variant
badge-error	Color	Error color variant
badge-xs	Size	Extra small variant
badge-sm	Size	Small size variant
badge-md	Size	Medium size (default)
badge-lg	Size	Large size variant
badge-xl	Size	Extra large size variant

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo