Here are some examples showcasing 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.
.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
= hero_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.