Action

TabBar

Dark Mode

Main Header 다음의 탭으로 분류된 메뉴 UI입니다. Default/Hover/Select 3가지 상태를 지원하며, 각 탭에 좌·우 아이콘을 배치할 수 있습니다.

import { TabBar } from "@/shared/ui/common/action"

인터랙티브 데모

Tab Count

Active Tab

Icon Position

tsx

const items = [
  { label: "전체", value: "all" },
  { label: "진행중", value: "progress" },
  { label: "완료", value: "done" },
];

<TabBar
  items={items}
  value="all"
  onChange={setValue}
/>

Tab Counts

탭 개수별 레이아웃 비교입니다.

3 Tabs

4 Tabs

6 Tabs

With Icons

아이콘 배치 옵션별 예시입니다. Left / Right / Both 조합이 가능합니다.

Left Icon

Right Icon

Both Icons

Props

TabBar

Prop	Type	Required	Default	설명
`items`	`TabBarItem[]` interface TabBarItem { label: string; value: string; leftIcon?: ComponentType<{ className?: string }>; rightIcon?: ComponentType<{ className?: string }>; }	✓	—	탭 아이템 목록
`value`	`string`	✓	—	현재 선택된 값 (controlled)
`onChange`	`(value: string) => void`	—	—	값 변경 시 콜백
`className`	`string`	—	—	추가 CSS 클래스