Attaches a row or column of buttons into one segmented unit.
import { ButtonGroup } from "@cooud-ui/ui";
npx cooud-ui add button-group
Generated from the component's exported types.
Extends HTMLAttributes<HTMLDivElement>
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the grouped buttons. |
On this page
Wrap a row of buttons in `ButtonGroup` and they fuse into one segmented control — shared edges collapse and inner radii flatten.
<ButtonGroup><Button variant="outline"><ChevronLeft />Prev</Button><Button variant="outline">Page 1</Button><Button variant="outline">Next<ChevronRight /></Button></ButtonGroup>
Set `orientation="vertical"` to stack the buttons into a single column segmented unit.
<ButtonGroup orientation="vertical"><Button variant="outline"><AlignLeft />Left</Button><Button variant="outline"><AlignCenter />Center</Button><Button variant="outline"><AlignRight />Right</Button></ButtonGroup>