Haedong
040

Button Group

Action

last: —

Customize

Direction
Variant

Code

<ButtonGroup aria-label="Clipboard">
  <Button>Cut</Button>
  <Button>Copy</Button>
  <Button>Paste</Button>
</ButtonGroup>

Install

npx shadcn@latest add https://components.haedong.dev/r/button-group.json

Props

Extends the native div props and renders role="group"; give it an aria-label. It holds no state: put Buttons (any variant) inside and wire each one's onClick. The hovered or focused button lifts above its neighbours so its border and focus ring stay whole.

PropTypeDescription
orientation"horizontal" | "vertical"Stack direction. Defaults to "horizontal".
childrenReactNodeButtons, or any bordered controls of the same height.