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.
You can also join elements vertically.
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.