03 · Components · 액션
버튼 그룹Button Group
여러 동작을 가까이 묶어 관계성을 강조합니다. 문서 편집 툴바·뷰 전환·필터 액션처럼, 서로 연관된 버튼들이 하나의 컨트롤처럼 움직여야 할 때 사용하세요.
StableWCAG AA
가로 그룹
tsx
<ButtonGroup>
<Button variant="secondary">왼쪽 정렬</Button>
<Button variant="secondary">가운데</Button>
<Button variant="secondary">오른쪽 정렬</Button>
</ButtonGroup>미리보기
세로 그룹
tsx
<ButtonGroup orientation="vertical">
<Button variant="secondary">복사</Button>
<Button variant="secondary">붙여넣기</Button>
<Button variant="secondary">잘라내기</Button>
</ButtonGroup>미리보기
그룹 전체를 하나의 단위로 안내하기 위해 컨테이너에 role="group"을 부여합니다. 그룹 이름이 모호할 때는 aria-label을 함께 제공하세요.
기본 사용
tsx
import { ButtonGroup } from "@/components/ui/ButtonGroup";
import { Button } from "@/components/ui/Button";
<ButtonGroup aria-label="정렬">
<Button variant="secondary">오래된 순</Button>
<Button variant="secondary">최신 순</Button>
</ButtonGroup>미리보기
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | 자식 버튼 나열 방향. |
aria-label | string | 그룹의 의미를 보조 기술에 전달 (권장). | |
children* | Button[] | 주님의교회 PCL Button을 2개 이상 직접 자식으로 전달. |