Action

SegmentBar

Dark Mode

Main Header 다음의 탭으로 분류된 메뉴 UI입니다. 2개 이상의 세그먼트를 균등 배치합니다.

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

인터랙티브 데모

Segments

Active

tsx

const ITEMS_2 = [
  { label: "전체", value: "all" },
];

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

세그먼트 개수별 레이아웃 비교입니다.

2 Segments

3 Segments

4 Segments

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