Button Group

Groups related buttons together with shared borders and consistent styling.

export default function ButtonGroupHero() {
  return (
    <ButtonGroup>
      <Button variant="surface">Day</Button>
      <Button variant="surface">Week</Button>
      <Button variant="surface">Month</Button>
    </ButtonGroup>
  );
}

Installation

npx shadcn@latest add "https://ora-ui.com/r/button-group.json"

Usage

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@/registry/ui/button-group';
import { Button } from '@/registry/ui/button';

<ButtonGroup>
  <Button variant="surface">One</Button>
  <Button variant="surface">Two</Button>
  <Button variant="surface">Three</Button>
</ButtonGroup>;

Default

A horizontal group of buttons sharing a continuous border.

export default function ButtonGroupDefault() {
  return (
    <ButtonGroup>
      <ButtonGroup>
        <Button variant="surface" size="icon">
          <ChevronLeftIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="surface">One</Button>
        <Button variant="surface">Two</Button>
        <Button variant="surface">Three</Button>
      </ButtonGroup>
    </ButtonGroup>
  );
}

Vertical

Use orientation="vertical" to stack buttons.

export default function ButtonGroupVertical() {
  return (
    <ButtonGroup orientation="vertical">
      <Button variant="surface" size="icon">
        <PlusIcon />
      </Button>
      <Button variant="surface" size="icon">
        <MinusIcon />
      </Button>
    </ButtonGroup>
  );
}

With icons

Buttons in a group support icons the same way standalone buttons do.

export default function ButtonGroupWithIcons() {
  return (
    <ButtonGroup>
      <Button variant="surface">
        <ChevronLeftIcon />
        Previous
      </Button>
      <Button variant="surface">
        Next
        <ChevronRightIcon />
      </Button>
    </ButtonGroup>
  );
}

Icon buttons

Groups of icon-only buttons for compact action bars.

export default function ButtonGroupIconButtons() {
  return (
    <ButtonGroup>
      <Button variant="surface" size="icon">
        <PencilSquareIcon className="size-3.5" />
      </Button>
      <Button variant="surface" size="icon">
        <ShareIcon className="size-3.5" />
      </Button>
      <Button variant="surface" size="icon">
        <BookmarkIcon className="size-3.5" />
      </Button>
      <Button variant="surface" size="icon">
        <TrashIcon className="size-3.5" />
      </Button>
    </ButtonGroup>
  );
}

With separator

Use ButtonGroupSeparator to divide buttons. Recommended for solid and soft variants — not needed for outline, which relies on its border for separation.

export default function ButtonGroupWithSeparator() {
  return (
    <ButtonGroup>
      <ButtonGroup>
        <Button>
          <MagnifyingGlassIcon />
          Search
        </Button>
        <ButtonGroupSeparator />
        <Button>
          <PlusCircleIcon />
          New
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="soft">
          <MagnifyingGlassIcon />
          Search
        </Button>
        <ButtonGroupSeparator />
        <Button variant="soft">
          <PlusCircleIcon />
          New
        </Button>
      </ButtonGroup>
    </ButtonGroup>
  );
}

With text

Use ButtonGroupText to attach a non-interactive label to the group.

Sort by
export default function ButtonGroupWithText() {
  return (
    <ButtonGroup>
      <ButtonGroupText>Sort by</ButtonGroupText>
      <Button variant="surface">Name</Button>
      <Button variant="surface">Date</Button>
      <Button variant="surface">Size</Button>
    </ButtonGroup>
  );
}

Props

ButtonGroup

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"
classNamestring—

All other props are forwarded to the underlying <div> element.

ButtonGroupSeparator

PropTypeDefault
orientation"horizontal" | "vertical""vertical"
classNamestring—

All other props are forwarded to the Separator primitive.

ButtonGroupText

PropTypeDefault
classNamestring—

All other props are forwarded to the underlying <div> element.