7onicDESIGN SYSTEM

Tabs

Tabs는 관련 콘텐츠를 패널별로 전환하는 내비게이션 컴포넌트입니다. 3가지 variant와 4가지 사이즈로 다양한 레이아웃에 대응합니다.

3
Variants
4
Sizes
2
Orientation
Radix
Base

Playground

Preview
D

Account settings content

Variant
Size
Color
Options
<Tabs defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>
    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account">
    <p className="text-sm text-text-muted">Account settings content</p>
  </Tabs.Content>
  <Tabs.Content value="settings">
    <p className="text-sm text-text-muted">General settings content</p>
  </Tabs.Content>
  <Tabs.Content value="notifications">
    <p className="text-sm text-text-muted">Notification preferences</p>
  </Tabs.Content>
</Tabs>

Variants

line

Content for tab 1

<Tabs defaultValue="tab1">
  <Tabs.List variant="line">
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">
    <p className="text-sm text-text-muted">Content for tab 1</p>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <p className="text-sm text-text-muted">Content for tab 2</p>
  </Tabs.Content>
  <Tabs.Content value="tab3">
    <p className="text-sm text-text-muted">Content for tab 3</p>
  </Tabs.Content>
</Tabs>

enclosed

Content for tab 1

<Tabs defaultValue="tab1">
  <Tabs.List variant="enclosed">
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">
    <p className="text-sm text-text-muted">Content for tab 1</p>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <p className="text-sm text-text-muted">Content for tab 2</p>
  </Tabs.Content>
  <Tabs.Content value="tab3">
    <p className="text-sm text-text-muted">Content for tab 3</p>
  </Tabs.Content>
</Tabs>

pill

Content for tab 1

<Tabs defaultValue="tab1">
  <Tabs.List variant="pill">
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">
    <p className="text-sm text-text-muted">Content for tab 1</p>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <p className="text-sm text-text-muted">Content for tab 2</p>
  </Tabs.Content>
  <Tabs.Content value="tab3">
    <p className="text-sm text-text-muted">Content for tab 3</p>
  </Tabs.Content>
</Tabs>

Sizes

sm
높이32px
폰트13px
가로 패딩12px
md
높이36px
폰트13px
가로 패딩14px
default
높이40px
폰트14px
가로 패딩16px
lg
높이48px
폰트16px
가로 패딩24px

Features

Fitted

Account content

<Tabs defaultValue="tab1">
  <Tabs.List fitted>
    <Tabs.Trigger value="tab1">Account</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Settings</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Notifications</Tabs.Trigger>
  </Tabs.List>
</Tabs>

With Icons

Account settings

<Tabs defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account"><User /> Account</Tabs.Trigger>
    <Tabs.Trigger value="settings"><Settings /> Settings</Tabs.Trigger>
    <Tabs.Trigger value="notifications"><Bell /> Notifications</Tabs.Trigger>
  </Tabs.List>
</Tabs>

Disabled

Active tab content

<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Active</Tabs.Trigger>
    <Tabs.Trigger value="tab2" disabled>Disabled</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Active</Tabs.Trigger>
  </Tabs.List>
</Tabs>

API

Component Structure

Tabs— Radix Tabs
.ListProps.TriggerProps.ContentProps

Props

Tabs (Root)

defaultValueundefined
string

기본 선택 탭 값 (비제어 모드)

valueundefined
string

선택된 탭 값 (제어 모드)

onValueChangeundefined
(value: string) => void

탭 변경 시 콜백

orientation"horizontal"
"horizontal" | "vertical"

탭 방향

activationMode"automatic"
"automatic" | "manual"

탭 활성화 모드: automatic은 포커스 이동 시 즉시 전환, manual은 Enter/Space 필요

Tabs.List

variant"line"
"line" | "enclosed" | "pill"

탭 목록의 시각 스타일

size"default"
"sm" | "md" | "default" | "lg"

탭 트리거 사이즈

color"default"
"default" | "primary"

활성 인디케이터 색상 (line variant 전용)

radius"md"
"none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

모서리 둥글기: enclosed는 상단 모서리 none~xl, pill은 컨테이너 9단계

fittedfalse
boolean

탭을 부모 너비에 균등하게 배치

Tabs.Trigger

value—
string

탭의 고유 식별 값 (필수)

disabledfalse
boolean

탭 비활성화

Tabs.Content

value—
string

연결될 탭 값 (필수)

forceMountundefined
boolean

비활성 시에도 DOM 유지 (애니메이션용)

Anatomy

1
2
3
Overview
4
Settings
History
5
Trigger height40px
Padding X16px
Content gapmt-4
1
Root
루트 컨테이너
2
List
탭 바
3
Trigger
개별 탭 버튼
4
Indicator
활성 언더라인
5
Content
콘텐츠 패널

Best Practices

✓

권장

  • ✓탭 라벨은 짧고 명확하게 (1~2단어)
  • ✓관련 콘텐츠 그룹화에 사용
  • ✓아이콘으로 탭 내용을 시각적으로 보조
  • ✓기본값으로 가장 중요한 탭을 선택 상태로 설정
✕

지양

  • ✗탭을 너무 많이 사용하지 않기 (5개 이하 권장)
  • ✗페이지 내비게이션 목적으로 사용하지 않기
  • ✗탭 순서를 동적으로 변경하지 않기
  • ✗탭 안에 탭을 중첩하지 않기

Accessibility

키보드 조작

Tab탭 목록에 포커스 / 패널로 이동
←→수평 탭 간 이동
↑↓수직 탭 간 이동
Home / End첫 번째 / 마지막 탭으로 이동
Enter / Space탭 선택 (manual 모드 시)

ARIA / WCAG

  • role="tablist" / role="tab" / role="tabpanel"
  • aria-selected로 선택 상태 자동 표시
  • aria-orientation 자동 설정
  • disabled 탭은 키보드 내비게이션에서 건너뜀

Tabs vs Segmented

비슷해 보이지만 용도와 구조가 다릅니다. 적절한 컴포넌트를 선택하세요.

용도

Tabs: 콘텐츠 내비게이션

Segmented: 값 선택 (필터, 전환)

구조

Tabs: TabList + TabPanel 조합

Segmented: 단독 컴포넌트

결과

Tabs: 패널 전환 표시

Segmented: 같은 영역 내 데이터 변경

배치

Tabs: 페이지/섹션 상단

Segmented: 콘텐츠 내 어디서든

Radix Primitive

Tabs: @radix-ui/react-tabs

Segmented: RadioGroup

구분 포인트: Tabs는 서로 다른 콘텐츠 패널을 전환할 때 사용합니다. Segmented는 같은 콘텐츠 영역 내 표시를 변경할 때 사용합니다. 비슷해 보이는 경우(Tabs pill vs Segmented default)에도 Tabs.Content 패널 유무로 선택하세요.