All components (204)

Button group

Actions · ButtonGroup

What it is and when to use it

Several buttons joined together that are ONE block of actions: "Save" and "Save and close", "Previous" and "Next".

When to use it

When each button is an action that runs and is not left selected.
size on the group gives the size to all the buttons that do not set their own.

When not to

If what you have is a "one of these" and the group has state, it is SegmentedGroup. It looks very similar and does something else.
If they are two halves of the SAME action (do it, or unfold its variants), SplitButton.
If they are many controls in a bar, Toolbar: there navigation moves to the arrows, which here would be a nuisance.

Keyboard: Tab reaches each button, like any single button. It has role="group" and not toolbar precisely for that reason.

Accessibility: label is required — without it the reader names the buttons individually and loses the fact that they go together. On hover or focus, the button rises above its neighbors: otherwise the border of the one next to it covers half of the focus ring and you cannot tell where it is.

Fine-tuning: it inherits that of the button (--amset-button-*). The joining is done by removing the inner radius and overlapping a border, not with gap: 0, which would leave the line in the middle twice as thick.

What it looks like

<ButtonGroup label="Order actions">
  <Button>Save</Button>
  <Button>Save and close</Button>
  <Button>Discard</Button>
</ButtonGroup>
<ButtonGroup label="Calendar week" size="sm" detached>
  <Button>Previous</Button>
  <Button>Today</Button>
  <Button>Next</Button>
</ButtonGroup>

Props

Import it with import { ButtonGroup } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	The buttons, in the order in which they are seen.
`label`required	`string`	What the group is called: "Order actions". Without it, the screen reader names the loose buttons and loses the fact that they go together.
`className`	`string`	Merged with the library classes; it does not replace them.
`detached`	`boolean`	Separated instead of joined together, keeping the group.
`fullWidth`	`boolean`	—
`orientation`	`"horizontal" \| "vertical"`	—
`size`	`"sm" \| "md" \| "lg"`	The size of every button in the group that does not give its own: it is written once instead of on each button. One that carries its own `size` keeps it.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: