Badge DaisyUI

Inline labels and status indicators using DaisyUI's badge class.

Variants

Primary Secondary Accent Neutral Outline Ghost
go
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgePrimary}) { Primary }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeSecondary}) { Secondary }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeAccent}) { Accent }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeNeutral}) { Neutral }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeOutline}) { Outline }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeGhost}) { Ghost }

Status colours

Success Warning Error Info
go
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeSuccess}) { Success }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeWarning}) { Warning }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeError}) { Error }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgeInfo}) { Info }

Sizes

XS SM MD LG XL
go
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgePrimary, Size: daisyui.BadgeSizeXS}) { XS }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgePrimary, Size: daisyui.BadgeSizeSM}) { SM }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgePrimary}) { MD }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgePrimary, Size: daisyui.BadgeSizeLG}) { LG }
@daisyui.Badge(daisyui.BadgeProps{Variant: daisyui.BadgePrimary, Size: daisyui.BadgeSizeXL}) { XL }

Props

PropTypeDefaultDescription
Variant BadgeVariant""badge-primary, badge-secondary, badge-accent, badge-neutral, badge-ghost, badge-outline, badge-error, badge-warning, badge-success, badge-info
Size BadgeSize""badge-xs, badge-sm, (default md), badge-lg, badge-xl
Class string""Extra classes
Attrs templ.AttributesnilSpread any HTML attribute