Button Group

Joins related Buttons into one visual unit with shared borders. A div with role=group: give it an aria-label. Every button stays its own tab stop; for arrow-key navigation between them use a toolbar instead.

Installation

npx nuecrea-ui add button-group

Usage

import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';

export default function ButtonGroupStory() {
  return (
    <main className="grid justify-items-start gap-6">
      <ButtonGroup aria-label="Text alignment">
        <Button variant="outline">Left</Button>
        <Button variant="outline">Center</Button>
        <Button variant="outline">Right</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Save">
        <Button>Save</Button>
        <Button>Save as…</Button>
      </ButtonGroup>
      <ButtonGroup orientation="vertical" aria-label="Vertical position">
        <Button variant="outline">Top</Button>
        <Button variant="outline">Middle</Button>
        <Button variant="outline">Bottom</Button>
      </ButtonGroup>
    </main>
  );
}

API reference

ButtonGroup

The group. Its direct children are joined, so put Buttons (or Menu/Popover triggers) straight inside. Renders <div> with role group.

PropTypeDefaultDescription
orientation'horizontal' | 'vertical'"horizontal"Lays the buttons out in a row or a column.
Data attributePresent when
data-orientationalways: 'horizontal' or 'vertical'