Tabs
탭은 관련된 콘텐츠를 그룹화하여 한 번에 하나의 섹션만 표시하는 네비게이션 컴포넌트입니다.
Figma 컴포넌트: Horizontal tabs, Vertical tabs
Horizontal Tabs
Button Brand
Button Gray
Underline
Button Border
Button Minimal
Full Width
탭이 전체 너비를 차지합니다.
Vertical Tabs
세로 방향 탭입니다. 설정 페이지, 사이드 네비게이션 등에 사용합니다.
Button Brand (Vertical)
Line (Vertical)
Size
sm, md 두 가지 사이즈를 지원합니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label: string, current?: boolean, badge?: number }[] | [] | 탭 아이템 배열 |
type | 'button-brand' | 'button-gray' | 'underline' | 'button-border' | 'button-minimal' | 'line' | 'button-brand' | 탭 스타일 타입 |
size | 'sm' | 'md' | 'sm' | 탭 크기 |
fullWidth | boolean | false | 전체 너비 사용 여부 (Horizontal만) |
vertical | boolean | false | 세로 방향 여부 |
Figma Variants
Horizontal Tabs
| Property | Values |
|---|---|
| Type | Button brand Button gray Underline Button border Button minimal |
| Size | sm md |
| Full width | True False |
| Breakpoint | Desktop Mobile |
Vertical Tabs
| Property | Values |
|---|---|
| Type | Button primary Button gray Line Button border Button minimal |
| Size | sm md |
| Breakpoint | Desktop Mobile |