Tabs

사용

variant 로 두 가지 시각을 제공한다.

• segmented (default) — icon-only 콤팩트 toolbar/segmented bar. 24×24, 아이콘 18px 강제, aria-label 이 툴팁 텍스트 + a11y 라벨로 동시에 쓰인다.
• label — 텍스트 라벨이 children 으로 들어가는 ghost-toggle 톤. 페이지 상단의 섹션 스위처 용도. 툴팁은 띄우지 않는다.

import { Atom, PencilRuler } from "@fluxloop-ai/pds-icons/icons";
import { Icon } from "@fluxloop-ai/pds-ui/components/icon";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@fluxloop-ai/pds-ui/components/tabs";

// segmented (default)
<Tabs defaultValue="loop">
  <TabsList>
    <TabsTrigger value="loop" aria-label="Loop">
      <Icon icon={Atom} />
    </TabsTrigger>
    <TabsTrigger value="profile" aria-label="Profile">
      <Icon icon={PencilRuler} />
    </TabsTrigger>
  </TabsList>
  <TabsContent value="loop">...</TabsContent>
  <TabsContent value="profile">...</TabsContent>
</Tabs>

// label
<Tabs variant="label" defaultValue="spirit">
  <TabsList>
    <TabsTrigger value="spirit">Spirit</TabsTrigger>
    <TabsTrigger value="personas">Personas</TabsTrigger>
  </TabsList>
  <TabsContent value="spirit">...</TabsContent>
</Tabs>

Segmented (default)

Label

Disabled

Vertical

tooltipSide="right" 로 세로 배치에 맞춰 툴팁 위치 조정 (segmented variant 전용).

Props

Tabs

TabsTrigger

segmented 의 children 자리에는 <Icon /> 한 개를 권장. label 의 children 자리에는 텍스트 라벨을 직접 넣는다.

토큰 매핑

공통

segmented

label

Registry 설치

npx shadcn add https://pds.pluto.com/r/tabs