Segmented Control
세그먼트 컨트롤은 버튼 그룹을 툴바나 분할 버튼 형태로 결합한 컴포넌트입니다. UI에서 미니 "탭" 역할로도 활용되며, 예를 들어 날짜 범위를 전환하는 데 사용합니다.
Figma 컴포넌트: Segmented_control
Default
기본 세그먼트 컨트롤입니다. 첫 번째 아이템이 활성화 상태로 표시됩니다.
Size
md와 sm 두 가지 크기를 지원합니다.
Date Range
날짜 범위 필터처럼 4개 이상의 아이템도 사용할 수 있습니다.
Dark Mode
다크 모드에서도 동일한 시각적 일관성을 유지합니다. 우측 상단의 다크 모드 토글로 확인하세요.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label: string, value?: string }[] | [] | 세그먼트 아이템 배열 |
size | 'md' | 'sm' | 'md' | 세그먼트 크기 |
defaultValue | string | 첫 번째 항목 | 초기 선택 값 (uncontrolled) |
value | string | - | 선택 값 (controlled) |
onChange | (value: string) => void | - | 선택 변경 콜백 |
Figma Variants
| Property | Values |
|---|---|
| Size | md sm |
| Active | on off |