Button Group

Groups multiple buttons into a segmented row with shared border treatment. Inner border radii are flattened automatically so buttons visually connect without gaps or double borders.

✓Horizontal and vertical orientations
✓Flattens inner border radii automatically
✓Works with any Button variant

import { Button Group }from "@aetherstack/ui"

button group.tsx

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

export function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button variant="outline">Left</Button>
      <Button variant="outline">Middle</Button>
      <Button variant="outline">Right</Button>
    </ButtonGroup>
  )
}

Usage

Horizontal (default)

Default orientation — buttons share horizontal borders.

Vertical

Stack buttons vertically with shared vertical borders.

With default variant

Mix solid and outline variants within a group.

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Layout direction. Horizontal groups buttons left-to-right; vertical stacks them.
className	string	—	Additional Tailwind classes applied to the wrapper div.
...props	React.HTMLAttributes<HTMLDivElement>	—	All standard HTML div attributes.

* Required props

Accessibility

→ButtonGroup renders with role='group' — assistive technology treats children as a related set.
→Ensure each child Button has a meaningful accessible name via its text content or aria-label.
→For toggle-style button groups (only one active), use ToggleGroup instead to get proper aria-pressed semantics.