Button Group
Group related buttons with shared edges and radius.
Button Group
Installation
1pnpm dlx shadcn@latest add @glasswave/button-groupUsage
1import { ButtonGroup, Button } from "glasswave";2 3<ButtonGroup>4 <Button>One</Button>5 <Button>Two</Button>6 <Button>Three</Button>7</ButtonGroup>ButtonGroup only handles the joining (shared edges, collapsed inner radii,
z-index on hover) and does not change the buttons' styling, so any variant
can be grouped. Keep one variant per group for an even seam.
1<ButtonGroup>2 <Button variant="default">Like</Button>3 <Button variant="default">Repost</Button>4</ButtonGroup>5 6<ButtonGroup>7 <Button variant="destructive">Report</Button>8 <Button variant="destructive" size="icon" aria-label="More">9 <MoreHorizontal className="size-4" />10 </Button>11</ButtonGroup>API Reference
ButtonGroup
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |
className | string | — |
Accepts all standard <div> attributes.