Button Group
Groups related buttons into one visually continuous control, merging borders and corner radii between them.
Install
pnpm dlx shadcn@latest add @namche/button-groupUsage
import { Button } from '@/components/ui/button';
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@/components/ui/button-group';
<ButtonGroup>
<Button variant="outline">On-demand</Button>
<Button variant="secondary">Spot</Button>
<Button variant="outline">Reserved</Button>
</ButtonGroup>
<ButtonGroup>
<ButtonGroupText>eu-west-dornbirn</ButtonGroupText>
<ButtonGroupSeparator />
<Button variant="outline">Change region</Button>
</ButtonGroup>ButtonGroup takes an orientation of horizontal | vertical and stretches its
children to fill the group, trimming borders and radii between adjacent items via
data-slot attribute selectors — any direct child that renders a data-slot
(buttons, selects, another ButtonGroup) merges correctly. ButtonGroupText is a
non-interactive label segment for a static value inside the group, and
ButtonGroupSeparator draws a hairline between segments.