Components
Segmented Control
2~3개 고정 선택지에서 하나를 고릅니다. 뷰 전환에도 씁니다.
코드 보기
<div class="tn-seg">
<button class="on">기획자 뷰</button>
<button>IT 뷰</button>
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 2분할 | 뷰 전환 (Insight 기획자/IT) | |
| 3분할 | 지능 티어 (빠름/보통/신중) |
Guidelines
✓ Do
- 선택지 이름은 2어절 이내
- 선택 상태가 화면 전체에 즉시 반영
✕ Don't
- 4개 이상이면 Select로
- 선택지가 동적으로 변하면 쓰지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
트랙 | var(--muted) + 1px border / 8px | |
on | card 배경 + 그림자 |
비교
Segmented vs Tabs — Segmented는 한 값의 선택, Tabs는 콘텐츠 영역 전환.