Button Group
버튼 그룹은 여러 버튼을 하나의 툴바나 탭처럼 결합한 컴포넌트입니다. 날짜 범위 전환, 뷰 모드 선택 등 미니 "탭" 역할로도 활용합니다.
Figma 컴포넌트: Base components/Button groups
Text Only
가장 기본적인 버튼 그룹입니다.
Current (Active) 상태
With Leading Icon
With Dot Indicator
Icon Only
아이콘만 사용하는 버튼 그룹입니다.
States
Many Items
Props
ButtonGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
current | boolean | false | 현재 선택된 항목 여부 |
state | default | hover | focused | disabled | default | 상태 (문서 시각화용) |
iconOnly | boolean | false | 아이콘 전용 모드 |
icon | circle | left-arrow | plus | right-arrow | - | 아이콘 종류 |
dot | boolean | false | 상태 표시 점 표시 여부 |
disabled | boolean | false | 비활성화 여부 |
children | ReactNode | - | 버튼 레이블 텍스트 |
Figma Variants
_Button group base
| Property | Values |
|---|---|
| Current | True False |
| Icon | False Leading Dot Only |
| State | Default Hover Focused Disabled |
Button group (Composed)
| Property | Values |
|---|---|
| Icon | False Leading Only |