CoreTabs

탭 목록과 탭 아이템으로 콘텐츠를 전환하는 레거시 탭 컴포넌트. Tabs로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Tabs를 사용하세요.

CoreTabs + CoreTabItem은 탭 목록과 개별 탭을 구성하는 컴포넌트 쌍입니다. active 상태를 소비자가 직접 관리하는 제어 컴포넌트 방식입니다.

direction — horizontal (기본), vertical 배치
size — sm, md (기본) 크기
leadingElement / trailingElement — 탭 아이템 앞뒤에 아이콘 배치
active — 활성 상태를 외부에서 제어 (Base UI 없이 수동 관리)
disabled — 비활성화, 키보드·마우스 이벤트 차단

Usage

기본 사용법 (가로 방향)

active·onClick을 직접 연결해 상태를 관리합니다.

() => {
const [active, setActive] = React.useState(0);
return (
  <CoreTabs>
    <CoreTabItem active={active === 0} onClick={() => setActive(0)}>Tab 1</CoreTabItem>
    <CoreTabItem active={active === 1} onClick={() => setActive(1)}>Tab 2</CoreTabItem>
    <CoreTabItem active={active === 2} onClick={() => setActive(2)}>Tab 3</CoreTabItem>
    <CoreTabItem active={active === 3} onClick={() => setActive(3)}>Tab 4</CoreTabItem>
  </CoreTabs>
);
}

세로 방향

() => {
const [active, setActive] = React.useState(0);
return (
  <CoreTabs direction="vertical">
    <CoreTabItem active={active === 0} onClick={() => setActive(0)}>Tab 1</CoreTabItem>
    <CoreTabItem active={active === 1} onClick={() => setActive(1)}>Tab 2</CoreTabItem>
    <CoreTabItem active={active === 2} onClick={() => setActive(2)}>Tab 3</CoreTabItem>
  </CoreTabs>
);
}

크기

() => {
const [active, setActive] = React.useState(0);
return (
  <VStack $css={{ gap: '16px' }}>
    <CoreTabs>
      <CoreTabItem size="sm" active={active === 0} onClick={() => setActive(0)}>Small Tab 1</CoreTabItem>
      <CoreTabItem size="sm" active={active === 1} onClick={() => setActive(1)}>Small Tab 2</CoreTabItem>
      <CoreTabItem size="sm" active={active === 2} onClick={() => setActive(2)}>Small Tab 3</CoreTabItem>
    </CoreTabs>
    <CoreTabs>
      <CoreTabItem size="md" active={active === 0} onClick={() => setActive(0)}>Medium Tab 1</CoreTabItem>
      <CoreTabItem size="md" active={active === 1} onClick={() => setActive(1)}>Medium Tab 2</CoreTabItem>
      <CoreTabItem size="md" active={active === 2} onClick={() => setActive(2)}>Medium Tab 3</CoreTabItem>
    </CoreTabs>
  </VStack>
);
}

아이콘과 함께

leadingElement·trailingElement에 아이콘 컴포넌트를 전달합니다. 아이콘 크기는 size에 따라 자동 조정됩니다 (sm → 16px, md → 20px).

() => {
const [active, setActive] = React.useState(0);
return (
  <CoreTabs>
    <CoreTabItem
      active={active === 0}
      onClick={() => setActive(0)}
      leadingElement={<IconTuneOutline />}
    >
      Tab 1
    </CoreTabItem>
    <CoreTabItem
      active={active === 1}
      onClick={() => setActive(1)}
      leadingElement={<IconTuneOutline />}
      trailingElement={<IconCaretDownFilled />}
    >
      Tab 2
    </CoreTabItem>
    <CoreTabItem active={active === 2} onClick={() => setActive(2)}>Tab 3</CoreTabItem>
  </CoreTabs>
);
}

비활성화된 탭

() => {
const [active, setActive] = React.useState(0);
return (
  <CoreTabs>
    <CoreTabItem active={active === 0} onClick={() => setActive(0)}>Tab 1</CoreTabItem>
    <CoreTabItem active={active === 1} onClick={() => setActive(1)}>Tab 2</CoreTabItem>
    <CoreTabItem disabled>Tab 3 (disabled)</CoreTabItem>
    <CoreTabItem active={active === 3} onClick={() => setActive(3)}>Tab 4</CoreTabItem>
  </CoreTabs>
);
}

Props

ComponentPropsWithoutRef<'div'> 확장 컴포넌트입니다.

Prop

Type

CoreTabItem

ComponentPropsWithoutRef<'button'> 확장 컴포넌트입니다.

Prop

Type

CoreTabsDirection

Prop

Type

스타일

CoreTabs Container

display: flex, gap: spacing-400 (16px)
flex-direction: row (horizontal) / column (vertical)

CoreTabItem — Size Variants

Size	Typography	Padding X	Padding Y	Gap
`sm`	`heading[1]`	`spacing-50 (2px)`	`spacing-150 (6px)`	`spacing-150 (6px)`
`md`	`heading[2]`	`spacing-100 (4px)`	`spacing-200 (8px)`	`spacing-200 (8px)`

States

상태	스타일
Default	`color: text-3`
Hover (inactive)	`color: text-1`, 하단 `2px` 바 `border[3]`
Active	`color: text-1`, 하단 `2px` 바 `toggle-primary[1]`
Active + Hover	하단 바 `toggle-primary[2]`
Focus-visible	`border-radius: radius-100`, `box-shadow: inset 0 0 0 2px focus`
Disabled	`color: text-4`

마이그레이션 가이드

CoreTabs + CoreTabItem에서 Tabs로 이전하세요.

// Before — 수동 active 관리
const [active, setActive] = useState(0);
<CoreTabs>
  <CoreTabItem active={active === 0} onClick={() => setActive(0)}>Tab 1</CoreTabItem>
  <CoreTabItem active={active === 1} onClick={() => setActive(1)}>Tab 2</CoreTabItem>
</CoreTabs>

// After — Base UI가 상태·접근성 자동 처리
<Tabs.Root defaultValue="tab1">
  <Tabs.List>
    <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
    <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="tab1">Tab 1 콘텐츠</Tabs.Panel>
  <Tabs.Panel value="tab2">Tab 2 콘텐츠</Tabs.Panel>
</Tabs.Root>

CoreTabs/Item prop	Tabs 대응
`direction`	`Tabs.Root orientation`
`active`	`Tabs.Root value` / `defaultValue` 자동 처리
`size`	`Tabs.Tab size`
`leadingElement`	`<Tabs.Icon>` 서브컴포넌트
`trailingElement`	`<Tabs.Icon>` 서브컴포넌트
`disabled`	`Tabs.Tab disabled`

CoreTabs

On this page