Tab

관련된 콘텐츠를 그룹화하고, 한 번에 하나의 콘텐츠만 표시하는 네비게이션 요소입니다. 제한된 공간에서 여러 정보를 효율적으로 구성할 때 사용하며, 사용자가 콘텐츠 간 빠르게 전환할 수 있도록 돕습니다.

Anatomy

  1. 1Selection indicator
  2. 2Active tab
  3. 3Inactive tab
  4. 4Icon button

Variants

Resize
Size
Horizontal padding
Icon button

StatesWeb only

Size

모든 플랫폼에서 Medium이 기본 사이즈입니다. 모든 요소의 간격 및 텍스트 사이즈는 임의로 조절할 수 없으며 UX 의도에 따라서 다양한 사이즈를 선택하여 사용할 수 있습니다.

Resize

Fill

정해진 너비 안에서 Tab button을 균일한 너비로 나누어 사용합니다. 사용자에게 스크롤 없이도 모든 콘텐츠를 탐색할 수 있도록 명확성을 제공해야할 때 사용하며 Label의 너비가 대략적으로 균일할 때 사용하는 것을 권장합니다.

Hug

왼쪽부터 Tab이 차례대로 위치하며 스크롤을 통해 다양한 길이의 Label을 조화롭게 보여줄 수 있습니다. 스크롤이 발생할 때 Label이 걸쳐지게 설계하여 영역 밖에도 콘텐츠가 있다는 것을 암시할 수 있도록 합니다.

Horizontal padding

  • Horizontal padding=True: 횡스크롤 시 맨 끝 좌측, 우측에 기본 여백을 확보합니다.
  • Horizontal padding=False: 요소를 감싸는 Container가 여백을 포함하고 있을 경우 해당 옵션을 사용하지 않습니다.

Horizontal scroll

Top fixed

Navigation의 Toolbar를 활용하여 Tab을 상단에 고정할 시 Padding 옵션을 활성화합니다. 횡 스크롤 시 그라디언트가 적용되지 않습니다.(Tab과 Category는 동일한 구조를 가지고 있습니다.)

Icon button

필터, 세팅 등 유저의 편의성 및 행동을 유도하는 요소를 위치시킬 수 있습니다. Icon button은 횡스크롤 시 고정됩니다.

Usage

Divider

Top navigation의 Toolbar에 Tab을 배치할 시 Tab의 Divider가 아닌 Top navigation의 구분선이 적용됩니다.

Sticky

상단에 탭을 고정시켜 배치할 때에는 스크롤 시에 Navigation bar를 숨겨 화면을 효율적으로 활용합니다.

Hierarchy

Level.2 → 화면의 최상단 영역에서 내려지는 콘텐츠를 구분합니다.

Level.1 → 탭의 하위에서 세부적으로 한번 더 콘텐츠를 구분합니다.

Accessibility

KeyDescription
ArrowRight다음 요소로 값을 변경합니다. (Tab 내부에서 순환)
ArrowLeft이전 요소로 값을 변경합니다. (Tab 내부에서 순환)
Home PageUp첫 번째 요소로 포커스를 이동합니다.
End PageDown마지막 요소로 포커스를 이동합니다.
Enter현재 포커스된 요소를 클릭합니다.

How to use

Do

첫 번째 탭을 화면의 항상 기본 값으로 유지합니다.

Don’t

너무 긴 Label을 사용하지 않습니다.

© 2026 Wanted Lab, Inc.