CoreTabItem

레거시 탭 아이템 컴포넌트. 항상 CoreTabs 내부에서 사용합니다.

개요

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

CoreTabItem은 CoreTabs의 탭 목록을 구성하는 개별 탭 버튼 컴포넌트입니다. 반드시 CoreTabs 내부에서 사용해야 하며, 활성 상태(active)와 크기(size)를 직접 제어합니다.

<button> 기반 — ComponentPropsWithoutRef<'button'> 확장으로 onClick, disabled 등 네이티브 button 속성을 모두 지원
Leading / Trailing Element — 탭 텍스트 앞뒤에 아이콘을 삽입할 수 있으며, 지정한 size에 따라 아이콘 크기를 자동 조정(sm: 16px, md: 20px)
active 상태 직접 관리 — CoreTabs가 선택 상태를 자동으로 관리하지 않으므로, 소비자가 active prop과 onClick을 함께 제어해야 함

Usage

기본 사용법

<CoreTabs>
<CoreTabItem active>Tab</CoreTabItem>
</CoreTabs>

여러 탭과 상태 관리

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>
);
}

Leading / Trailing Element

탭 텍스트 앞뒤에 아이콘을 배치합니다. 아이콘 크기는 size prop에 따라 자동 조정됩니다.

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

크기 설정

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

비활성화된 탭

() => {
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<'button'>을 확장한 컴포넌트입니다.

Prop

Type

스타일

기본 속성

display: flex, position: relative, transition: 0.2s
color: text-3 (기본) / text-1 (hover, active) / text-4 (disabled)

Size Variants

size	typography	gap	padding-x	padding-y	아이콘 크기
`sm`	`heading[1]`	`spacing-150` (6px)	`spacing-50` (2px)	`spacing-150` (6px)	16px
`md`	`heading[2]`	`spacing-200` (8px)	`spacing-100` (4px)	`spacing-200` (8px)	20px

Active 상태

Active: 하단에 높이 2px, 색상 toggle-primary[1]의 바가 표시됩니다.
Active Hover: 하단 바 색상이 toggle-primary[2]로 변경됩니다.

Hover 상태

Hover (비활성, non-focus-visible): 하단에 높이 2px, 색상 border[3]의 밑줄이 표시됩니다.

Focus 상태

Focus-visible: border-radius: radius-100, box-shadow: inset 0 0 0 2px focus

마이그레이션 가이드

신규 Tabs.Tab 컴포넌트는 Base UI Tabs를 기반으로 재작성되어 선택 상태를 자동 관리합니다.

CoreTabItem	Tabs.Tab (신규)
`active` prop 직접 제어 필요	`Tabs.Root`의 `value` 기반 자동 관리
`onClick`으로 상태 변경	`Tabs.Root`의 `onValueChange`
`leadingElement / trailingElement`	`Tabs.Tab`의 children에 직접 배치
`CoreTabs` 필수	`Tabs.Root` + `Tabs.List` 필수

On this page