Badges

Here are some examples showcasing badges.

Simple Badges

You can use the Badge component to display a small amount of information. Badges can be used to indicate status, category, or other metadata.

The title can be passed through keyword arguments or as a block.

Preview

Plain Badge Primary Badge Secondary Badge Accent Badge Ghost Badge

Code

.my-2.flex.flex-col.lg:flex-row.gap-4
  = daisy_badge(title: "Plain Badge")
  = daisy_badge(title: "Primary Badge", css: "badge-primary")

  = daisy_badge(css: "badge-secondary") do
    Secondary Badge

  = daisy_badge(css: "badge-accent") do
    Accent Badge

  = daisy_badge(css: "badge-ghost") do
    Ghost Badge

Badge Sizes

Badges come in four sizes: large, medium, small, and extra small.

Preview

Large Badge Medium Badge Small Badge Extra Small Badge

Code

.flex.flex-col.lg:flex-row.lg:items-center.gap-4
  = daisy_badge(css: "badge-secondary badge-lg") do
    Large Badge

  = daisy_badge(css: "badge-success badge-md") do
    Medium Badge

  = daisy_badge(css: "badge-error badge-sm") do
    Small Badge

  = daisy_badge(css: "badge-warning badge-xs") do
    Extra Small Badge

Made with by Profoundry .