CODEWITHSUNDEEP
csstailwind-cssdaisyui
Peter Toth
Peter Toth

Reputation: 770

DaisyUI / TailwindCSS button group with breakpoint

I would like to join some buttons like so:

<div class="join">
  <button class="btn join-item">Action 0</button>
  <button class="btn join-item">Action 1</button>
  <button class="btn join-item">Action 2</button>
</div>

enter image description here

However a user might set to have any number of actions (usually not more than 7) and so I would like the button group to "wrap" or break the line.

I considered putting them into a grid, using flex, max width but I don't seem to get it to work.

The ideal solution has maybe 3 columns and if there are 5 items, the rounding of the buttons occur not just the outside, but the inside border as well, so at the intersection of items 2,3, and 5.

I did not find any similar problems, workarounds would also work if I'm missing some UI best practice.

Upvotes: 0

Views: 50

Answers (0)

Related Questions