Button Group
Betav1.0.0여러 버튼·인풋·셀렉트를 하나의 연결된 그룹으로 묶습니다. 안쪽 모서리가 펴지고 인접 border 가 겹쳐 깔끔하게 붙습니다. orientation, 중첩(nested) 툴바, split button, 인풋/셀렉트 결합을 지원합니다.
Loading…
import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";
<ButtonGroup>
<Button variant="outline">Previous</Button>
<Button variant="outline">Next</Button>
</ButtonGroup>Installation
pnpm dlx shadcn@latest add https://groudit.com/r/button-group.jsonVariants
Orientation
orientation="vertical" 로 세로 스택.
Loading…
<ButtonGroup orientation="vertical">
<Button variant="outline">Profile</Button>
<Button variant="outline">Billing</Button>
<Button variant="outline">Settings</Button>
</ButtonGroup>Sizes
Button 의 size 가 그룹 radius 와 함께 정렬됩니다.
Loading…
import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";
<ButtonGroup>
<Button variant="outline">Previous</Button>
<Button variant="outline">Next</Button>
</ButtonGroup>Nested
ButtonGroup 안에 ButtonGroup 을 넣으면 gap-2 로 분리되어 툴바를 구성합니다.
Loading…
// 중첩 그룹은 gap-2 로 분리되어 툴바를 구성
<ButtonGroup>
<ButtonGroup>
<Button variant="outline" size="icon">B</Button>
<Button variant="outline" size="icon">I</Button>
</ButtonGroup>
<ButtonGroup>
<Button variant="outline">Left</Button>
<Button variant="outline">Center</Button>
</ButtonGroup>
</ButtonGroup>Split button
주 액션 + ButtonGroupSeparator + 보조 트리거. (outline 이 아닌 solid 버튼에 권장)
Loading…
import {
ButtonGroup,
ButtonGroupSeparator,
} from "@/components/ui/button-group";
<ButtonGroup>
<Button>Save</Button>
<ButtonGroupSeparator />
<Button size="icon" aria-label="More">▾</Button>
</ButtonGroup>With input
ButtonGroupText prefix + Input + Button. 인풋은 자동으로 늘어납니다.
Loading…
import {
ButtonGroup,
ButtonGroupText,
} from "@/components/ui/button-group";
<ButtonGroup>
<ButtonGroupText>https://</ButtonGroupText>
<Input placeholder="groudit.com" />
<Button variant="outline">Go</Button>
</ButtonGroup>With select
Select 트리거를 그룹에 결합 — export 포맷 선택 등.
Loading…
<ButtonGroup>
<Button variant="outline">Export</Button>
<Select defaultValue="csv">
<SelectTrigger className="rounded-l-none">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="csv">CSV</SelectItem>
<SelectItem value="json">JSON</SelectItem>
</SelectContent>
</Select>
</ButtonGroup>Composition
ButtonGroup (orientation)
├── Button / Input / Select (여러 개)
├── ButtonGroup (중첩) — gap-2 로 분리
├── ButtonGroupText (render) — prefix/단위 라벨
└── ButtonGroupSeparator (orientation) — split 구분선Dependencies
설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.
npm packages
| Package | Version |
|---|---|
| @base-ui/react | 1.5.0 |
| class-variance-authority | 0.7.1 |
| clsx | 2.1.1 |
| tailwind-merge | 3.6.0 |