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.

Button Joins

Buttons can be joined with other components to create a single, cohesive element.

Note

When using with_button, the .join-item CSS class is added automatically. When using the content method, you must manually add the class.

Preview
Code
= 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")

Vertical Joins

You can also join elements vertically.

Preview
Code
= 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")

Direct Content (without with_item)

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.

Preview
new
Code
= daisy_join do
  = daisy_input(placeholder: "Search", css: "join-item")
  = 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")
Made with by Profoundry .
Copyright © 2023-2026 Profoundry LLC.
All rights reserved.