Button Group

import "@taprootio/espalier/button/group";

Groups related buttons into a visually connected segmented control.

Child esp-button elements lose their individual border-radius and merge into a continuous strip; the group container provides the outer rounded corners and border.

Groups can also contain labelled buttons:

Buttons can be wrapped in esp-tooltip or esp-popover:

When the group has a fixed width and contains more buttons than can fit, horizontal scrolling kicks in:

Add the toolbar attribute to opt into the WAI-ARIA toolbar pattern. This changes how the group sits in the tab order: instead of every button being its own tab stop, the whole group becomes a single tab stop, and the arrow keys (plus Home/End) move focus between the buttons inside it. Tabbing into the group lands on one button; the next Tab leaves the group entirely. Use it when a group bundles many actions (for example an editor formatting bar) so keyboard users do not have to Tab through every button.

The esp-input elements below sit before and after the group so the single-tab-stop behavior is easy to see: Tab from the first input lands on one toolbar button, the arrow keys move between the buttons, and the next Tab jumps straight to the second input.

When a button is wrapped in an esp-tooltip, the group sets trigger-tabindex="-1" on that tooltip automatically so its wrapper span does not reintroduce a tab stop the roving manager is removing:

Slots

<esp-button-group> has a slot:

Attributes

<esp-button-group> has the following attributes:

CSS Properties

<esp-button-group> has the following CSS properties: