Button Group
관련 동작과 보조 요소를 하나의 연결된 틀로 묶습니다.
- 성숙도
- 후보
- 소스 경로
components/ui/button-group.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
저장과 발행, 분할 동작, 입력과 실행처럼 같은 맥락의 요소를 묶을 때 씁니다.
사용하지 않을 때
서로 무관한 동작이나 긴 설명을 한 줄에 억지로 넣지 않습니다.
변형과 상태
horizontal고정 예시인접 요소의 1px 선이 하나의 구조로 읽히는지 확인합니다.
vertical고정 예시세로 배치에서도 이름과 조작 순서를 확인합니다.
split고정 예시주요 동작과 옵션 메뉴의 경계와 이름을 확인합니다.
input고정 예시입력과 실행 버튼이 하나의 필드처럼 연결되는지 확인합니다.
접근성
그룹 이름으로 관계를 알리고 각 컨트롤의 고유 이름도 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
label | string | 아니요 | 관련 요소 전체의 접근성 이름입니다. |
orientation | "horizontal" | "vertical" | 아니요 | 요소를 배치할 방향입니다. |
children | ReactNode | 예 | Button, 입력, 텍스트, 구분선 등 함께 배치할 요소입니다. |
사용 예시
지원 importimport {
ButtonGroup,
ButtonGroupSeparator,
ButtonGroupText,
} from "@/components/ui/button-group"
<ButtonGroup label="Document actions">
<Button>Save</Button>
<ButtonGroupSeparator />
<Button>Publish</Button>
</ButtonGroup>