ButtonGroup

Groups related buttons into one control.

Joins buttons visually by collapsing the radii and borders between them, while leaving each one an independently focusable button.

Import

import { ButtonGroup } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/button-group.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

<Stack gap={4}>
  <ButtonGroup aria-label="Text alignment">
    <Button variant="outline">Left</Button>
    <Button variant="outline">Centre</Button>
    <Button variant="outline">Right</Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Actions" attached={false}>
    <Button>Save</Button>
    <Button variant="ghost">Cancel</Button>
  </ButtonGroup>
</ButtonGroup>

Props