Chip Tabs

Chip Tabs는 Tab 컴포넌트와 유사하지만, 더 낮은 위계에서 사용되며 시각적으로 여백을 넓게 활용할 수 있는 스타일의 배리에이션입니다. 일반적으로 탭 간의 구분이 필요하지만, 강조된 공간을 요구하지 않는 경우에 적합합니다. Chip Tabs는 간결한 디자인과 함께, 탭의 선택 상태를 직관적으로 전달하며, 다양한 콘텐츠를 효율적으로 탐색할 수 있게 돕습니다.

Variants

Best Practice

Chip Tabs는 공간을 효율적으로 활용할 수 있습니다. 또한, Chip Tabs의 레이블은 짧고 직관적이어야 합니다. 너무 긴 텍스트는 피하고, 필요한 정보만 간결하게 제공하여 사용자가 쉽게 이해할 수 있도록 합니다.

Chip Tabs는 Tabs 바로 하단에 배치하여 큰 범위의 콘텐츠 전환은 Tabs로, 세부적인 콘텐츠 전환은 Chip Tabs로 활용합니다. 이를 통해 사용자에게 명확한 콘텐츠 계층을 제공하고, 직관적인 탐색을 돕습니다.

Chip Tabs vs Tabs vs Control Chip

Tabs는 상위 레벨의 네비게이션 요소로, Chip Tabs는 낮은 위계에서 사용되며, Control Chip은 가장 작은 제어 단위로 사용됩니다. Tabs는 섹션 간 전환, Chip Tabs는 선택적인 콘텐츠 전환, Control Chip은 단일 선택 또는 조작을 나타냅니다.

또한, Tabs와 Chip Tabs는 모두 콘텐츠 전환을 강조하지만, Chip Tabs는 더 넓은 여백을 사용하여 더 직관적으로 콘텐츠를 구분합니다. Control Chip은 선택된 상태를 강조하는 방식으로 간단하고 직관적입니다.

	Tabs	Chip Tabs	Control Chip
목적	페이지 내 주요 섹션을 구분하고 큰 범위의 콘텐츠 전환을 지원	섹션 내 세부 항목 전환, 낮은 위계의 콘텐츠 전환을 지원	단일/다중 선택이나 간단한 조작을 위한 제어 요소
시각적 강조도	높은 강조, 선택된 탭이 명확하게 구분됨	낮은 강조, 간결하고 여백을 넓게 사용하는 스타일	선택된 항목을 간단히 강조
사용 시점	페이지 내 주요 섹션을 전환할 때 사용	세부 항목 간 전환이 필요할 때, 탭보다 작은 범위의 전환	필터링이나 단일/다중 선택을 해야 할 때 사용
구성	주로 화면 최상단에 위치함	화면 최상단에 사용되거나(Neutral Solid), Tabs 하단에 위치함(Brand Solid)	여러 개의 작은 Chip을 수평으로 배치하여 사용

개요

옵션 테이블

링크

스펙

base

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x4

variant=neutralSolid

상태	슬롯	속성	값
enabled	root	gap	0px

variant=brandSolid

상태	슬롯	속성	값
enabled	root	gap	8px

base

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x3_5
		paddingY	$dimension.x2
		cornerRadius	$radius.full
		minHeight	36px
	label	fontSize	$font-size.t4
		fontWeight	$font-weight.bold

variant=neutralSolid

상태	슬롯	속성	값
enabled	label	color	$color.fg.neutral
		fontWeight	$font-weight.bold
enabled, pressed	root	color	$color.bg.layer-default-pressed
selected	root	color	$color.bg.neutral-inverted
	label	color	$color.fg.neutral-inverted
selected, pressed	root	color	$color.bg.neutral-inverted-pressed
disabled	label	color	$color.fg.disabled
selected, disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled

variant=brandSolid

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
	label	color	$color.fg.neutral-muted
		fontWeight	$font-weight.medium
enabled, pressed	root	color	$color.bg.neutral-weak-pressed
selected	root	color	$color.bg.brand-solid
	label	color	$color.palette.static-white
		fontWeight	$font-weight.bold
selected, pressed	root	color	$color.bg.brand-solid-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
selected, disabled	root	color	$color.bg.disabled