Components
Tabs
Overview
탭은 동일한 계층에서 콘텐츠를 전환할 때 사용하는 내비게이션 컴포넌트입니다. 한 번에 하나의 탭만 활성화되며, 탭 간 이동은 페이지 이동 없이 콘텐츠 영역만 전환됩니다.
Variants
탭 그룹의 시각 스타일입니다. 화면 밀도·위계에 맞게 선택합니다.
- Outlined Tabs테두리 박스 안에 탭을 배치합니다.
- Underlined Tabs하단 보더로 활성 탭을 강조합니다.
- Solid Tabs둥근 세그먼트 형태로 전환합니다.
- Chip Tabs칩형 선택지로 여러 탭을 나란히 둡니다.
Outlined Tabs
첫번째 콘텐츠
Underlined Tabs
첫번째 콘텐츠
Solid Tabs
첫번째 콘텐츠
Chip Tabs
첫번째 콘텐츠
States
인터랙션 상태(Default · Hover · Pressed · Selected · Disabled)를 variant별로 나란히 비교합니다. 프리뷰에서 강제 표시합니다.
- Default기본(비선택) 상태입니다.
- Hover포인터가 올라간 상태입니다.
- Pressed클릭/터치 중인 상태입니다.
- Selected탭이 선택된(활성) 상태입니다.
- Disabled비활성으로 선택할 수 없습니다.
| Variant | States |
|---|---|
| Outlined | |
| Underlined | |
| Solid | |
| Chip |
Colors
기본 활성 색은 --surface-primary / --text-primary, 비활성은 --text-secondary입니다. 선택 색은 TabsTrigger.selectedClassName(data-[state=active]:…), hover/pressed는 TabsTrigger.className(hover:… / active:…)으로 각각 커스텀할 수 있습니다.
기본 활성 색은 --surface-primary / --text-primary, 비활성은 --text-secondary입니다. 탭별 커스텀은 selectedClassName에 data-[state=active]:… 유틸을 넘기고, hover·pressed는 className에 hover:… active:… 유틸로 커스텀합니다.
기본 Primary
소비앱별 커스텀 색상을 className과 selectedClassName으로 커스텀합니다.