Joins allow you to combine multiple components into a singular, joined element. This is useful for components like buttons, inputs with symbols, and many more.
Buttons can be joined with other components to create a single, cohesive element.
When using with_button, the .join-item CSS class is added
automatically. When using the content method, you must manually add
the class.
= daisy_join do |join|
- join.with_button(title: "Start")
- join.with_button(title: "Center")
- join.with_button(title: "End")
= daisy_join do |join|
- join.with_button(icon: "bars-3-bottom-left")
- join.with_button(icon: "bars-3")
- join.with_button(icon: "bars-3-bottom-right")
You can also join elements vertically.
= daisy_join(css: "join-vertical min-w-32") do |join|
- join.with_button(title: "Top", css: "w-full")
- join.with_button(title: "Middle", css: "w-full btn-primary")
- join.with_button(title: "Bottom", css: "w-full")
When using the content method instead of with_item or with_button,
you must manually add the .join-item CSS class to each element. This
allows you to join different types of components together.
= daisy_join(css: "max-w-full") do
= daisy_input(placeholder: "Search", css: "join-item w-full min-w-0 sm:w-auto")
= daisy_select(css: "join-item") do
%option(disabled selected) Filter
%option Sci-fi
%option Drama
%option Action
= daisy_indicator do |indicator|
- indicator.with_item do
= daisy_badge(title: "new", css: "badge-secondary")
= daisy_button(title: "Search", css: "join-item")
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.