Chip

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

Figma

Done

iOS

Done

Android

Done

개요

옵션 테이블

속성	값	기본값
size	large, medium, small	medium
variant	solid, outlineStrong, outlineWeak	solid
layout	with text, icon only	with text
selected	true, false	false
disabled	true, false	false
prefix icon	icon
suffix icon	icon

스펙

base

상태	슬롯	속성	값
enabled	root	colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
		cornerRadius	$radius.full
	prefixIcon	paddingLeft	$dimension.x1_5
	prefixAvatar	size	$dimension.x6
	suffixIcon	paddingRight	$dimension.x1_5
	label	fontWeight	$font-weight.medium
		paddingX	$dimension.x1_5
	icon	color	$color.fg.neutral

variant=solid

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
	label	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
	icon	color	$color.fg.neutral
pressed	root	color	$color.bg.neutral-weak-pressed
disabled	root	opacity	0.5
selected	root	color	$color.bg.neutral-inverted
	label	color	$color.fg.neutral-inverted
	prefixIcon	color	$color.fg.neutral-inverted
	suffixIcon	color	$color.fg.neutral-inverted
	icon	color	$color.fg.neutral-inverted
selected, pressed	root	color	$color.bg.neutral-inverted-pressed
selected, disabled	root	opacity	0.5

variant=outlineStrong

상태	슬롯	속성	값
enabled	root	color	$color.bg.transparent
		strokeColor	$color.stroke.neutral-muted
		strokeWidth	1px
	label	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
	icon	color	$color.fg.neutral
pressed	root	color	$color.bg.transparent-pressed
disabled	root	opacity	0.5
selected	root	color	$color.bg.neutral-inverted
	label	color	$color.fg.neutral-inverted
	prefixIcon	color	$color.fg.neutral-inverted
	suffixIcon	color	$color.fg.neutral-inverted
	icon	color	$color.fg.neutral-inverted
selected, pressed	root	color	$color.bg.neutral-inverted-pressed
selected, disabled	root	opacity	0.5

variant=outlineWeak

상태	슬롯	속성	값
enabled	root	color	$color.bg.transparent
		strokeColor	$color.stroke.neutral-muted
		strokeWidth	1px
	label	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
	icon	color	$color.fg.neutral
pressed	root	color	$color.bg.transparent-pressed
disabled	root	opacity	0.5
selected	root	strokeColor	$color.stroke.neutral-contrast
		color	$color.bg.neutral-weak
selected, pressed	root	color	$color.bg.neutral-weak-pressed
selected, disabled	root	opacity	0.5

size=small

상태	슬롯	속성	값
enabled	root	height	32px
		paddingX	$dimension.x1_5
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixIcon	size	$dimension.x3_5
	suffixIcon	size	$dimension.x3_5
	prefixAvatar	size	$dimension.x5
	icon	size	$dimension.x3_5

size=medium

상태	슬롯	속성	값
enabled	root	height	36px
		paddingX	$dimension.x2
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixIcon	size	$dimension.x4
	suffixIcon	size	$dimension.x3_5
	prefixAvatar	size	$dimension.x6
	icon	size	$dimension.x4

size=large

상태	슬롯	속성	값
enabled	root	height	40px
		paddingX	$dimension.x2_5
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixIcon	size	$dimension.x4
		paddingLeft	$dimension.x1_5
	suffixIcon	size	$dimension.x4
	prefixAvatar	size	$dimension.x7
	icon	size	$dimension.x4

size=small, layout=iconOnly

상태	슬롯	속성	값
enabled	root	minWidth	$dimension.x8

size=medium, layout=iconOnly

상태	슬롯	속성	값
enabled	root	minWidth	$dimension.x9

size=large, layout=iconOnly

상태	슬롯	속성	값
enabled	root	minWidth	$dimension.x10

Last updated on

Chip Tabs

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

Help Bubble

Help Bubble은 사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 부가적인 도움말 컴포넌트입니다.

On this page

개요 옵션 테이블 스펙