Action Chip

사용자가 특정 액션을 실행할 수 있도록 도와주는 Pill 형태의 컴포넌트입니다.

Action Chip은 사용자가 특정 작업을 수행하거나 항목을 선택할 때, Button보다 작은 단위의 동작이나 키워드를 표현합니다.

Chip의 라벨은 사용자가 클릭하거나 탭했을 때 수행되는 동작을 명확하게 전달해야 합니다. 또한, 화면에 표시되는 Chip의 시각적 스타일과 실제 액션의 중요도가 일치하도록 설계하여 사용자가 자연스럽게 상호작용할 수 있도록 돕습니다.

Differences from V2

Filter, Control 역할을 하는 Chip 과의 디자인 형태를 명확하게 분리했습니다.
Action 이라는 동작을 기대할 수 있도록 Acton Button 과의 형태적 연결성을 가질 수 있도록 개선했습니다.

Properties

Size

Action Chip은 small, medium 두 가지 사이즈로 제공됩니다. medium이 화면에서 범용적으로 사용되며, small은 주로 좁은 영역에서 사용됩니다.

Layout

Action Chip은 라벨과 아이콘의 조합으로 구성되며, 아이콘은 버튼의 목적을 시각적으로 강조하거나 동작을 보조합니다. 라벨 앞, 뒤, 양쪽 또는 아이콘만으로 구성할 수 있어 상황에 맞게 유연하게 활용됩니다. 다만, 라벨 가독성을 해치지않도록 아이콘은 제한적으로 사용하는 것을 권장합니다.

Icon (Optional)

아이콘은 버튼의 동작을 시각적으로 표현하고 강조를 하는 데 도움을 줍니다. 라벨의 앞, 뒤에 위치하여 사용할 수 있으며, Prefix는 주로 액션의 의미를 보조하는 역할, Suffix 는 Chevron 과 같이 동작을 보조하는 역할의 아이콘을 사용합니다.

States

Action Chip은 상호작용 상태를 나타내기 위해 State Layer를 활용합니다. 사용 가능한 상태는 enabled, pressed (Hover), disabled, Loading 이며, 주요 토큰에는 각 State 에 맞는 시멘틱 토큰이 존재합니다.
자세한 내용은 Color Palette 를 참조해주세요.

Best Practice

Action Chip은 사용자에게 특정 키워드나 추천 항목을 직관적으로 제공함으로써 효과적으로 동작을 유도합니다. 간결한 텍스트로 라벨을 작성해야 하며, 동시에 구체적인 키워드를 제안하여 사용자가 쉽고 빠르게 액션을 확인하고 접근할 수 있도록 합니다.

Action Chip에 Close 버튼을 사용하여 사용자가 선택한 항목을 자유롭게 삭제할 수 있도록 도와줍니다. Close 아이콘은 Chip의 끝에 배치하여 삭제 기능을 직관적으로 전달하며, 사용자 경험을 자연스럽게 만듭니다. 아이콘은 적절한 크기로 설정해 터치 영역을 충분히 확보합니다.

Action Button vs Action Chip

Action Button은 사용자의 명확한 실행을 유도하는 컴포넌트로, 저장, 제출, 이동처럼 중요한 행동을 강조할 때 사용됩니다. Action Chip은 주로 버튼보다 낮은 시각적 위계로 설계되어, 키워드나 카테고리 같은 항목을 선택할 때 적합합니다. 기능적으로는 유사하지만, 사용자가 '선택'으로 인식하는 맥락에서 자연스럽게 사용됩니다.

	Action Button	Action Chip
목적	사용자의 주요 행동을 유도 (저장, 삭제 등)	키워드 단위의 선택 또는 컨텍스트 전환
시각적 주목도	높은 강조도	낮은 강조도
사용 시점	페이지 이동, 폼 제출, 저장, 삭제 등 결과가 즉시 발생	키워드 삭제, 키워드 진입 등 선택에 기반한 액션이 발생
사용 패턴	단일로도 사용 가능	2개 이상 그룹으로 사용 권장

Control의 역할로 사용하지 않습니다.Control 역할이 필요한 경우, Control Chip 을 사용합니다. Action Chip 에는 Selected 동작으로 상호작용할 수 없습니다.

멀티컬러 아이콘을 사용하지 않습니다.Chip은 사용자에게 작은 단위의 키워드, 액션을 제공하는 보조적인 컴포넌트로, 주목도가 높은 멀티컬러 아이콘은 사용하지 않습니다. 또한, 멀티컬러 아이콘은 20px 보다 작은 사이즈로 사용할 수 없습니다.

Label을 간결하게 작성합니다.유저가 빠르게 원하는 액션을 인지하고 선택할 수 있도록 Label을 간결하고 명료하게 작성합니다.

불필요한 단어를 사용하지 않습니다.불필요한 단어나 문구를 지양하고 Label은 1줄을 초과하지 않습니다. Chip의 역할과 정보를 한눈에 파악할 수 있도록 합니다.

개요

옵션 테이블

속성	값	기본값
size	medium, small	medium
layout	with text, icon only	with text
disabled	true, false	false
count	number
prefix icon	icon
suffix icon	icon

base

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
		cornerRadius	$radius.full
	label	color	$color.fg.neutral
		fontWeight	$font-weight.medium
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral-subtle
	icon	color	$color.fg.neutral
	count	color	$color.fg.neutral-muted
		fontWeight	$font-weight.medium
pressed	root	color	$color.bg.neutral-weak-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
	icon	color	$color.fg.disabled
	count	color	$color.fg.disabled

size=small

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x8
		paddingY	$dimension.x1_5
		gap	$dimension.x1
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixIcon	size	$dimension.x4
	suffixIcon	size	$dimension.x3_5
	count	fontSize	$font-size.t4
		lineHeight	$line-height.t4

size=medium

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x9
		paddingY	$dimension.x2
		gap	$dimension.x1
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixIcon	size	$dimension.x4
	suffixIcon	size	$dimension.x3_5
	count	fontSize	$font-size.t4
		lineHeight	$line-height.t4

size=small, layout=withText

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

size=small, layout=iconOnly

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

size=medium, layout=withText

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

size=medium, layout=iconOnly

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