Button Group · paneui

Seats

Installation

pnpm dlx shadcn@latest add @paneui/button-group

Usage

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group"

<ButtonGroup aria-label="Alignment">
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

Examples

Vertical

Nested

Accessibility

The group has role="group"; give it an aria-label. For a set where one option is chosen, use ToggleGroup instead.

API Reference

ButtonGroup

Also accepts every prop of div.

orientation= "horizontal": "horizontal" | "vertical"; Direction of the joined buttons.

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Direction of the joined buttons.

ButtonGroupSeparator

A hairline between filled buttons. Also accepts every prop of div.

orientation= "vertical": "horizontal" | "vertical"

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"vertical"

ButtonGroupText

A label on the group's fill. Also accepts every prop of div.