Chip

Anatomy

Chip은 Container와 Label로 구성되며, Prefix Item과 Suffix Item을 가질 수 있습니다.

Properties

Variant

Chip은 Solid, Outline Strong, Outline Weak 세 가지 스타일의 Variant를 가집니다. 각각 선택된 상태를 표시할 수 있습니다.

Size

Chip은 Large, Medium, Small 세 가지 Size를 가집니다.

State

Chip은 선택 여부에 따라 각각 Enabled, Pressed, Disabled 상태를 가집니다.

Prefix Property

Prefix Slot은 Label의 왼쪽에 위치합니다. Prefix에는 Icon, Avatar, Image 세 가지의 타입을 프리셋 형태로 제공합니다.

Prefix Slot에 들어오는 요소에 따라 좌측 여백이 달라지므로 Custom Slot은 사용을 권장하지 않습니다.

Suffix Property

Suffix Slot은 Label의 오른쪽에 위치합니다. Suffix에는 Icon 타입을 프리셋 형태로 제공합니다.

포함된 타입 이외에 다른 요소를 사용하고 싶은 경우 Custom Child Swap을 통해서 변경해주세요.

Guidelines

Chip의 활용

Chip은 사용자가 선택하거나 입력하는 값을 표시할 때 단독으로 사용할 수 있으며 여러 개의 Chip을 함께 사용하는 경우 Chip Group 템플릿을 사용합니다.

Chip Group은 제안하는 항목 (Suggestion), 단일 또는 다중 선택 (Selection)의 용도로 사용할 수 있습니다.

콘텐츠 목록에서 조건의 적용 및 해제를 제어하는 Filter 역할로 사용할 때는 Filter Bar 템플릿을 사용합니다.

Chip을 Tab 역할로 사용하는 경우 Tabs 컴포넌트의 Chip Variant를 사용합니다.

Chip Group Layout

Chip Group은 한 줄에 표시하는 Scrollable Layout과 모든 Chip을 표시하는 Overflow Layout 두 가지 방법으로 표시할 수 있습니다.

Filter Bar

콘텐츠 목록에서 조건의 적용 및 해제를 제어하는 Filter 역할로 Chip을 사용할 때는 Filter Bar 템플릿을 사용합니다.

Filter Bar는 활성화된 필터가 있는 경우 필터 선택을 해제할 수 있는 Clear 버튼이 나타나는 동작을 포함합니다.

Chip을 Selection으로 사용하기

필터 항목, 입력폼 같이 단일 또는 다중 선택 동작에 Chip Group을 사용할 수 있습니다. 화면에 Selected 된 값이 여러 개 표시될 수 있으므로 주목도가 낮은 Outline Weak 스타일 사용을 권장합니다.

Chip을 Suggestion으로 사용하기

사용자에게 제안하는 항목에 Chip을 사용할 수 있습니다. 화면 내 다른 요소와의 조합에 따라 스타일을 선택해 사용해주세요.

Chip을 Input으로 사용하기

사용자가 입력한 내용을 Chip에 표시할 수 있습니다. 이 경우 Suffix Slot에 Chip을 제거할 수 있는 Remove 버튼을 사용해주세요.

Chip V3 변경점

• Button, Toggle Button, Radio Group, Filter 등 용례에 따라 분리되어 있던 Chip 컴포넌트를 하나로 통합했습니다.
• 여러 개의 Chip을 사용하는 케이스를 위해 Chip Group, Filter Bar 템플릿을 추가했습니다.
• Tab 용도로 사용하는 경우를 고려하여 Tabs 컴포넌트의 Variant로 Solid Chip과 Outline Chip을 추가했습니다.
• Prefix Slot에 아이콘뿐만 아니라 Avatar와 Image도 표시할 수 있도록 구조를 개선했습니다.
• 다른 Chip이나 Tabs 컴포넌트와 함께 사용하거나 화면 내 주목도에 따라 적절한 스타일을 선택할 수 있도록 Solid, Outline Strong, Outline Weak 스타일을 추가했습니다.

Specification

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