Button Group
여러 버튼을 논리적으로 그룹화하는 컴포넌트입니다.
비율 조절, 붙어있는 버튼, 세그먼트 컨트롤 등 다양한 레이아웃을 지원합니다.
비율 조절, 붙어있는 버튼, 세그먼트 컨트롤 등 다양한 레이아웃을 지원합니다.
설치
Terminal
npx @msub-core/ui-cli add button-group
기본 사용
여러 버튼을 그룹으로 묶어 표시합니다. 기본적으로 간격이 있는 형태입니다.
TSX
import { ButtonGroup } from "@msub-core/ui/components/button-group"
import { Button } from "@msub-core/ui/components/button"
function Example() {
return (
<ButtonGroup>
<Button variant="outline">왼쪽</Button>
<Button variant="outline">가운데</Button>
<Button variant="outline">오른쪽</Button>
</ButtonGroup>
)
}ButtonGroup Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| mode | "attached" | "separated" | "separated" | No | 버튼 간격 모드 |
| orientation | "horizontal" | "vertical" | "horizontal" | No | 버튼 배치 방향 |
| ratio | number[] | "equal" | "auto" | "auto" | No | 버튼 너비 비율 |
| gap | "none" | "xs" | "sm" | "default" | "lg" | "default" | No | 버튼 사이 간격 |
| fullWidth | boolean | false | No | 전체 너비 차지 여부 |
| align | "start" | "center" | "end" | "start" | No | 정렬 (fullWidth 미사용 시) |
| size | "sm" | "default" | "lg" | "xl" | - | No | 자식 버튼들의 공통 사이즈 |
| variant | "default" | "outline" | "secondary" | "ghost" | - | No | 자식 버튼들의 공통 variant |
| disabled | boolean | - | No | 모든 버튼 비활성화 |
| showDivider | boolean | false | No | attached 모드에서 구분선 표시 |
붙어있는 버튼 (Attached)
mode="attached"를 사용하면 버튼이 완전히 붙어서 하나의 컨트롤처럼 보입니다.
비율 조절
ratio prop으로 각 버튼의 너비 비율을 조절할 수 있습니다. 예: [3, 7]은 30%, 70% 비율입니다.
확인/취소 프리셋
자주 사용되는 확인/취소 버튼 조합을 위한 프리셋 컴포넌트입니다.
기본적으로 확인 버튼이 70%를 차지합니다.
ConfirmCancelGroup Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| onConfirm | () => void | - | No | 확인 버튼 클릭 핸들러 |
| onCancel | () => void | - | No | 취소 버튼 클릭 핸들러 |
| confirmText | string | "확인" | No | 확인 버튼 텍스트 |
| cancelText | string | "취소" | No | 취소 버튼 텍스트 |
| confirmRatio | number | 70 | No | 확인 버튼 비율 (%) |
| confirmVariant | "default" | "destructive" | "success" | "default" | No | 확인 버튼 스타일 |
| cancelVariant | "outline" | "secondary" | "ghost" | "ghost" | No | 취소 버튼 스타일 |
| loading | boolean | - | No | 확인 버튼 로딩 상태 |
| disabled | boolean | - | No | 전체 비활성화 |
세그먼트 컨트롤
라디오 버튼처럼 동작하는 토글 버튼 그룹입니다. 세 가지 스타일 변형을 지원합니다.
Default - 슬라이딩 인디케이터
Underline - 탭 스타일
Pills - 뱃지 스타일
세그먼트 컨트롤 (전체 너비)
SegmentedControl Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| options | SegmentedControlOption[] | - | Yes | 옵션 목록 { label, value, disabled, icon } |
| value | string | - | No | 선택된 값 |
| onChange | (value: string) => void | - | No | 값 변경 핸들러 |
| variant | "default" | "underline" | "pills" | "default" | No | 스타일 변형 |
| fullWidth | boolean | - | No | 전체 너비 차지 여부 |
| size | "sm" | "default" | "lg" | "default" | No | 사이즈 |
| disabled | boolean | - | No | 비활성화 여부 |
스플릿 버튼
메인 액션과 추가 옵션을 함께 제공하는 버튼입니다.
우측 화살표를 클릭하면 드롭다운 메뉴가 나타납니다.
SplitButton Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | - | No | 메인 버튼 텍스트 |
| onClick | () => void | - | No | 메인 버튼 클릭 핸들러 |
| menuItems | SplitButtonMenuItem[] | - | No | 드롭다운 메뉴 아이템 목록 |
| variant | "default" | "outline" | "secondary" | "default" | No | 버튼 스타일 |
| size | "sm" | "default" | "lg" | "default" | No | 버튼 크기 |
| fullWidth | boolean | - | No | 전체 너비 차지 여부 |
| disabled | boolean | - | No | 비활성화 여부 |
| loading | boolean | - | No | 로딩 상태 |
| leftIcon | ReactNode | - | No | 왼쪽 아이콘 |
스텝 버튼
다단계 폼이나 위저드에서 사용하는 이전/다음 버튼 조합입니다.
마지막 단계에서는 자동으로 완료 버튼으로 변경됩니다.
1 / 4
버튼을 클릭하여 단계를 이동해보세요. 4단계에서 완료 버튼이 나타납니다.
StepButtonGroup Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| onPrev | () => void | - | No | 이전 버튼 클릭 핸들러 |
| onNext | () => void | - | No | 다음 버튼 클릭 핸들러 |
| prevDisabled | boolean | - | No | 이전 버튼 비활성화 |
| nextDisabled | boolean | - | No | 다음 버튼 비활성화 |
| currentStep | number | - | No | 현재 스텝 (표시용) |
| totalSteps | number | - | No | 총 스텝 수 (표시용) |
| showSteps | boolean | false | No | 스텝 진행상황 표시 여부 |
| lastStepText | string | "완료" | No | 마지막 단계 버튼 텍스트 |
| onLastStep | () => void | - | No | 마지막 단계 버튼 클릭 핸들러 |
| lastStepVariant | "default" | "success" | "destructive" | - | No | 마지막 단계 버튼 스타일 |
수직 정렬
orientation="vertical"로 버튼을 수직으로 배치할 수 있습니다.
툴바 예시
실제 사용 예시: 에디터 툴바
컴포넌트 목록
ButtonGroup
기본 버튼 그룹 컨테이너
SegmentedControl
라디오 스타일 토글 버튼 그룹
SplitButton
메인 액션 + 드롭다운 트리거
ConfirmCancelGroup
확인/취소 버튼 프리셋
StepButtonGroup
이전/다음 스텝 버튼
ButtonGroupItem
개별 버튼 래퍼 (grow 제어)