Button Group
Joins buttons and fields into one control, with separators that match each button.
Installation
npx yolkui add button-groupSeparator and text
A separator takes the colour of the button before it; ButtonGroupText holds static context such as a page range.
Orientation and size
orientation="vertical" stacks the buttons. Size stays on each button: the group owns layout, never style.
Soft
Soft buttons share one ring, edge and lift across the group, and a separator draws each seam.
Variants
Every variant has a separator in its own colour. Outline shares its border instead, so it needs none.
With an input
A field in a group takes the free width, so give the group one (w-full). Beside outline and solid buttons the field keeps its own ring.
Pill
A pill field or button rounds the whole group, so the shared ring follows the curve.
With soft buttons
Beside a soft button the field hands its resting ring to the group, and a separator draws the seam, as between two soft buttons.