Small, colorful indicators for displaying status, counts, or metadata. Ideal for notifications, labels, tags, and visual cues. Supports various colors, sizes, and positioning options.
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.
.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
Badges come in four sizes: large, medium, small, and extra small.
.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
Badges can include icons on either the left or right side, or both.
Use the left_icon and right_icon options to add icons.
You can also use the icon option as an alias for left_icon.
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
= daisy_badge(title: "New", left_icon: "sparkles", css: "badge-primary")
= daisy_badge(title: "Download", right_icon: "arrow-down-tray", css: "badge-secondary")
= daisy_badge(title: "Favorite", icon: "star", css: "badge-warning")
= daisy_badge(title: "Settings", left_icon: "cog-6-tooth", right_icon: "chevron-right", css: "badge-accent")
Badges can be made clickable by providing an href option. This
transforms the badge into an anchor (<a>) tag.
You can also specify a target attribute for the link, such as _blank
for opening in a new tab.
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
= daisy_badge(title: "Documentation", href: "/api-docs", css: "badge-info")
= daisy_badge(title: "External Link", href: "https://google.com", target: "_blank", css: "badge-secondary")
= daisy_badge(title: "GitHub", href: "https://github.com/profoundry-us/loco_motion", left_icon: "code-bracket", css: "badge-neutral")
= daisy_badge(href: "/", css: "badge-primary") do
%span.flex.items-center.gap-1
= loco_icon "document-text", css: "size-4"
Read More
Badges can be displayed in an outline style.
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
= daisy_badge(css: "badge-outline") { "Default" }
= daisy_badge(css: "badge-primary badge-outline") { "Primary" }
= daisy_badge(css: "badge-secondary badge-outline") { "Secondary" }
= daisy_badge(css: "badge-accent badge-outline") { "Accent" }
Badges can be displayed in a soft style.
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
= daisy_badge(css: "badge-soft") { "Default" }
= daisy_badge(css: "badge-primary badge-soft") { "Primary" }
= daisy_badge(css: "badge-secondary badge-soft") { "Secondary" }
= daisy_badge(css: "badge-accent badge-soft") { "Accent" }
Badges can be displayed in a dash style.
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
= daisy_badge(css: "badge-dash") { "Default" }
= daisy_badge(css: "badge-primary badge-dash") { "Primary" }
= daisy_badge(css: "badge-secondary badge-dash") { "Secondary" }
= daisy_badge(css: "badge-accent badge-dash") { "Accent" }
Outline badges can be displayed with state colors.
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
= daisy_badge(css: "badge-info badge-outline") { "Info" }
= daisy_badge(css: "badge-success badge-outline") { "Success" }
= daisy_badge(css: "badge-warning badge-outline") { "Warning" }
= daisy_badge(css: "badge-error badge-outline") { "Error" }
Soft badges can be displayed with state colors.
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
= daisy_badge(css: "badge-info badge-soft") { "Info" }
= daisy_badge(css: "badge-success badge-soft") { "Success" }
= daisy_badge(css: "badge-warning badge-soft") { "Warning" }
= daisy_badge(css: "badge-error badge-soft") { "Error" }
Dash badges can be displayed with state colors.
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
= daisy_badge(css: "badge-info badge-dash") { "Info" }
= daisy_badge(css: "badge-success badge-dash") { "Success" }
= daisy_badge(css: "badge-warning badge-dash") { "Warning" }
= daisy_badge(css: "badge-error badge-dash") { "Error" }
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.