Button Group#

Put buttons side-by-side with proper spacing (e.g. gap-1) will create a button group with minimal effort, add rounded-{tblr}-none class to remove rounded corners to match the buttons together.

<div className="grid grid-cols-2 gap-1 p-4 bg-blue-100">
  <button className="btn btn-blue-p-2 rounded-r-none">Yee</button>
  <button className="btn btn-blue-p-2 rounded-l-none">Dog</button>
</div>

Alternatively, you can use btn-group to create a menu-like element, that also accomodate a label to the group.

Always remember to assign proper ARIA roles for better accessibility.