Chip Tabs

Chip 형태로 표현된 탭 컴포넌트입니다. 카테고리나 필터를 선택하여 콘텐츠를 전환할 때 사용됩니다.

Figma

Done

피그마 Tabs 컴포넌트의 Variant=Chip

iOS

Not Ready

Android

Not Ready

개요

옵션 테이블

속성	값	기본값
size	small, medium	medium
layout	hug, fill	hug

스펙

base

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

variant=neutralSolid

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

variant=neutralOutline

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

variant=brandSolid

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

base

상태	슬롯	속성	값
enabled	root	colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
		paddingY	$dimension.x2
		cornerRadius	$radius.full
	label	fontWeight	$font-weight.medium

size=medium

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x3_5
		minHeight	36px
	label	fontSize	$font-size.t4

size=large

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x4
		minHeight	40px
	label	fontSize	$font-size.t4

variant=neutralSolid

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
	label	color	$color.fg.neutral
enabled, pressed	root	color	$color.bg.transparent-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=neutralOutline

상태	슬롯	속성	값
enabled	root	color	$color.bg.transparent
		stroke	$color.stroke.neutral-muted
	label	color	$color.fg.neutral
enabled, pressed	root	color	$color.bg.transparent-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
enabled, pressed	root	color	$color.bg.neutral-weak-pressed
selected	root	color	$color.bg.brand-solid
	label	color	$color.palette.static-white
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

Last updated on

Checkbox

사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 목록에서 여러 항목을 선택하거나 약관 동의와 같은 선택적 작업에 사용됩니다.

Chip

Chip은 사용자가 특정 액션 혹은 선택, 필터링, 전환과 같은 제어 작업을 수행할 수 있도록 돕는 Pill 형태의 컴포넌트입니다.

On this page

개요 옵션 테이블 스펙