Button Group

A row container that attaches related action buttons into one segmented bar. At the default gap of 0 the engine collapses the group into a single shape: the first segment keeps its leading corners, the last its trailing corners, middles square off, and each interior boundary is drawn by exactly one shared 1px seam. Every segment stays its own button — its own label, its own on-press, its own disabled state.

For an exclusive active segment use a toggle-group (pressed state is the toggle family's job) or tabs; a button group is attached actions, never a choice.

button-group

Markup

<button-group>
  <button variant="outline" on-press="cut">Cut</button>
  <button variant="outline" on-press="copy">Copy</button>
  <button variant="outline" on-press="paste">Paste</button>
</button-group>

Zig builder

ui.el(.button_group, .{}, .{
    ui.button(.{ .variant = .outline, .on_press = .cut }, "Cut"),
    ui.button(.{ .variant = .outline, .on_press = .copy }, "Copy"),
    ui.button(.{ .variant = .outline, .on_press = .paste }, "Paste"),
})

Variants and icon segments

Grouped buttons keep their variant's fill — a primary or secondary group reads as one filled bar with the same seam collapse — and icon-sized segments make compact tool clusters (a pager, a zoom control). Mixing variants inside one group is possible but usually reads as a mistake; pick one register per bar.

<button-group>
  <button variant="outline" icon="chevron-left" on-press="prev">Back</button>
  <button variant="outline" on-press="today">Today</button>
  <button variant="outline" icon="chevron-right" icon-placement="trailing" on-press="next">Next</button>
</button-group>

Spacing out

gap above 0 opts out of the attached treatment: the children render as ordinary separate buttons with full corners and borders. Use a plain row if the actions are not related enough to attach.

<button-group gap="8">
  <button variant="outline" on-press="approve">Approve</button>
  <button variant="outline" on-press="reject">Reject</button>
</button-group>

Attributes

Children are ordinary buttons; see the button attributes for the per-segment surface.