Action Button

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

Action Button은 사용자가 새 플로우를 시작하거나 무언가를 확인하는 등의 작업을 수행해야 할 때 사용합니다.

버튼 라벨은 사용자가 버튼을 탭했을 때 어떤 동작이 일어나는지 명확히 전달해야 합니다. 화면에 표시되는 버튼의 시각적 위계와 실제 액션의 위계가 동일하도록 설계합니다.

Differences from V2

Variants : Neutral-Solid, Outline 타입이 추가되고 V2의 Primary-low가 삭제됐습니다.
Shape : 더 둥근 형태로 Radius 값이 변경되어, 부드러운 인상으로 개선됐습니다.
Size : V2의 H48 (Medium) 사이즈가 삭제됐습니다.

Action Button의 변화에 대한 더 자세한 소개는 What's New in V3: Action Button 🚀 에서 확인할 수 있습니다.

Variants

Brand-solid

브랜드의 핵심 가치를 전달하며, 사용자 간 연결이 일어나는 서비스의 주요 기능에 사용합니다. 높은 위계와 브랜드 임팩트를 가진 액션으로, 홈 피드의 글쓰기 FAB 버튼이나 채팅하기 버튼 같은 핵심 CTA에 적합하며, 한 화면에 하나만 사용하는 것을 권장합니다.

Neutral-solid

Brand-solid 다음으로 높은 위계를 가지며, 주로 대부분의 화면에서 CTA에 사용합니다. 고대비로 접근성과 시각적 가독성이 높은 Variant로, 사용자가 화면의 정보에 집중할 수 있도록 돕습니다. Brand-solid와는 달리 브랜드 아이덴티티를 전달하지 않으며, 한 화면에 하나만 사용하는 것을 권장합니다.

Neutral-weak

덜 중요한 서브 액션에 사용되며, Solid 타입이지만 시각적 부담이 적은 것이 특징입니다. CTA에서 조합형으로 사용할 경우, Brand-solid 와 Neutral-solid 를 보조하는 역할을 합니다.

Neutral-outline

가장 낮은 위계를 가지며, 주로 보조 액션을 표현하는 경우 사용합니다. 시각적으로 낮은 주목도를 가지고 있는 것이 특징입니다. Solid 타입과 조합형으로 사용할 수 없습니다.

Brand-outline

Solid 타입보다 덜 강조하는 액션에 사용되며, Neutral-outline 보다 높은 위계를 가집니다. 주로 Neutral-outline 과 조합형으로 사용하며, 액션의 명확한 위계를 표현할 수 있습니다. Solid 타입과 함께 사용할 수 없습니다.

Danger-solid

삭제나 초기화 같은 파괴적 변화나 부정적인 액션에 사용되며, 강한 경고 메시지를 전달하는 데 적합합니다. 주로 Alert Dialog에서 사용하며, 기능적으로 중요한 위험을 명확히 알리는 데 도움을 줍니다.

Hierarchy

Variants	Emphasis	Usage
Brand Solid	High	서비스의 중심이 되는 핵심 가치를 표현하는 경우에만 제한적으로 사용합니다. 한 화면에서 2개 이상 사용할 수 없습니다.
Neutral Sold	Medium	대부분의 화면에서 가장 중요한 역할의 CTA 에 사용합니다. 한 화면에서 2개 이상 사용할 수 없습니다.
Neutral Weak	Low	덜 중요한 서브 액션을 표현하는 경우 사용합니다. 한 화면에 여러개의 액션을 표현해야하는 경우에도 활용할 수 있습니다.

Variants	Emphasis	Usage
Brand Outline	High	주로 Neutral Outline 과 나란히 사용하며, 더 높은 강조도를 가진 액션을 표현할 때 사용합니다.
Neutral Outline	Medium	단독으로 사용할 수 있으며, Solid 타입의 Varint 보다 낮은 위계를 가진 서브 액션을 표현할 때 사용합니다. Brand Outline 과 나란히 사용할 땐 더 낮은 강조도를 가집니다.

Properties

Size

Action Button은 xsmall, small, medium, large 네 가지 사이즈로 제공됩니다. Small 과 Medium은 화면 중앙에서 범용적으로 사용되며, large는 주로 강조도가 높은 CTA 역할로 사용됩니다. xsmall은 작은 공간에서 효율적으로 사용할 수 있는 pill 형태로 제공됩니다.

Width

버튼은 컨테이너의 너비를 가득 채우거나 콘텐츠에 맞는 크기로 조정될 수 있습니다. 어떤 옵션을 선택하든, 버튼은 설정된 최소 및 최대 너비 기준을 따릅니다.

Loading

응답 시간이 길어지는 상황일 경우 로딩 상태를 표시할 수 있습니다. 로딩 상태가 되면 Progress Circle 이 버튼 내의 모든 콘텐츠(Label, Icon)를 대체하며, 로딩이 완료될 때까지 버튼의 상호작용을 비활성화합니다. 이때 버튼의 형태를 Disabled 상태로 표현하지 않습니다.

Icon (optional)

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

Layout

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

States

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

Best Practice

Neutral-weak, Neutral-solid, Brand-solid 배리언트를 조합하면 액션의 위계를 명확하게 표현할 수 있습니다. 이 조합은 시각적 부담을 줄이면서도 직관적인 경험을 제공하며, 사용자가 의사결정을 빠르고 쉽게 내릴 수 있도록 돕습니다.

또한, 채팅하기와 같이 브랜드 아이덴티티와 서비스의 핵심 가치를 담고있는 액션의 경우 Brand-solid 배리언트를 사용합니다.

Neutral-outline과 Brand-outline은 강조도가 낮은 서브 액션을 표현하는 데 적합합니다. 이 두 배리언트를 나란히 조합하면 버튼의 위계를 명확히 전달할 수 있습니다.

Neutral-weak와 Neutral-solid, Brand-solid 배리언트를 함께 사용할 경우, Neutral-weak이 Dismiss 의미를 가질 때는 3:7 비율을 활용해 액션 위계를 명확히 표현하는 것을 권장합니다.

Action Button vs Action Chip

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

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

Neutral-weak를 나란히 사용할 수 있습니다.Neutral-weak 와 같이 강조의 위계가 높지않은 Variant 의 경우, 비슷한 위계의 액션 두 개를 나열해 사용할 수 있습니다. 전달해야하는 액션이 두 개를 초과할 경우, Icon Variant 를 활용해 유저가 추가적인 액션들을 확인할 수 있도록 합니다.

Button을 4개 이상 나란히 사용하지 않습니다.Action Button 을 세 개 이상 나란히 배치하여 사용하지 않습니다. 여러개를 나란히 배치할 경우, 각 버튼의 중요도가 비슷해보여 유저가 어떤 버튼을 클릭해야 할지 판단이 어려워지고 버튼을 통한 클릭 유도의 효과가 감소됩니다.

브랜드 컬러는 제한적으로 사용합니다.브랜드 컬러를 강조의 역할로 무분별하게 사용하지 않습니다. 이는 액션의 위계를 명확히 전달하지 못해 사용자 혼란을 초래하고, 모든 버튼이 동일한 중요도를 가진 것처럼 설정되어, 사용자에게 명확한 우선순위와 선택지를 제공하지 못합니다.

강조도에 맞는 Variant를 사용합니다.더보기와 같이 중요도가 낮은 보조 액션에는 solid 배리언츠가 적합하지 않습니다. weak 혹은 outline 배리언츠 사용을 권장합니다.

개요

옵션 테이블

속성	값	기본값
variant	brand solid, neutral solid, neutral weak, critical solid, brand outline, neutral outline
size	xsmall, small, medium, large	medium
layout	with text, icon only	with text
disabled	true, false	false
loading	true, false	false
prefix icon	icon
suffix icon	icon

base

상태	슬롯	속성	값
enabled	root	colorDuration	$duration.d4
		colorTimingFunction	$timing-function.easing
	label	fontWeight	$font-weight.bold

variant=brandSolid

상태	슬롯	속성	값
enabled	root	color	$color.bg.brand-solid
	label	color	$color.palette.static-white
	icon	color	$color.palette.static-white
	prefixIcon	color	$color.palette.static-white
	suffixIcon	color	$color.palette.static-white
	progressCircle	trackColor	$color.palette.static-white-alpha-200
		rangeColor	$color.palette.static-white
pressed	root	color	$color.bg.brand-solid-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.brand-solid-pressed

variant=neutralSolid

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-inverted
	label	color	$color.fg.neutral-inverted
	icon	color	$color.fg.neutral-inverted
	prefixIcon	color	$color.fg.neutral-inverted
	suffixIcon	color	$color.fg.neutral-inverted
	progressCircle	trackColor	$color.palette.static-white-alpha-200
		rangeColor	$color.palette.static-white
pressed	root	color	$color.bg.neutral-inverted-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.neutral-inverted-pressed

variant=neutralWeak

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
	label	color	$color.fg.neutral
	icon	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
	progressCircle	trackColor	$color.palette.gray-500
		rangeColor	$color.fg.neutral
pressed	root	color	$color.bg.neutral-weak-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.neutral-weak-pressed

variant=criticalSolid

상태	슬롯	속성	값
enabled	root	color	$color.bg.critical-solid
	label	color	$color.palette.static-white
	icon	color	$color.palette.static-white
	prefixIcon	color	$color.palette.static-white
	suffixIcon	color	$color.palette.static-white
	progressCircle	trackColor	$color.palette.static-white-alpha-200
		rangeColor	$color.palette.static-white
pressed	root	color	$color.bg.critical-solid-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.critical-solid-pressed

variant=neutralOutline

상태	슬롯	속성	값
enabled	root	color	$color.bg.layer-default
		strokeColor	$color.stroke.neutral
		strokeWidth	1px
	label	color	$color.fg.neutral
	icon	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
	progressCircle	trackColor	$color.palette.gray-500
		rangeColor	$color.fg.neutral
pressed	root	color	$color.bg.layer-default-pressed
disabled	root	color	$color.bg.layer-default
		strokeColor	$color.stroke.neutral
	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.layer-default

variant=brandOutline

상태	슬롯	속성	값
enabled	root	color	$color.bg.layer-default
		strokeColor	$color.stroke.neutral
		strokeWidth	1px
	label	color	$color.fg.brand
	icon	color	$color.fg.brand
	prefixIcon	color	$color.fg.brand
	suffixIcon	color	$color.fg.brand
	progressCircle	trackColor	$color.palette.carrot-200
		rangeColor	$color.bg.brand-solid
pressed	root	color	$color.bg.layer-default-pressed
disabled	root	color	$color.bg.layer-default
		strokeColor	$color.stroke.neutral
	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.layer-default

size=xsmall

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x8
		cornerRadius	$radius.full
	progressCircle	size	14px
		thickness	2px

size=xsmall, layout=withText

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

size=xsmall, layout=iconOnly

상태	슬롯	속성	값
enabled	root	minWidth	$dimension.x8
		paddingX	$dimension.x1_5
		paddingY	$dimension.x1_5
	icon	size	$dimension.x3_5

size=small

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x9
		cornerRadius	$radius.r2
	progressCircle	size	14px
		thickness	2px

size=small, layout=withText

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

size=small, layout=iconOnly

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

size=medium

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x10
		cornerRadius	$radius.r2
	progressCircle	size	16px
		thickness	2px

size=medium, layout=withText

상태	슬롯	속성	값
enabled	root	gap	$dimension.x1
		paddingX	$dimension.x4
		paddingY	$dimension.x2_5
	prefixIcon	size	$dimension.x4
	suffixIcon	size	$dimension.x4
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4

size=medium, layout=iconOnly

상태	슬롯	속성	값
enabled	root	minWidth	$dimension.x10
		paddingX	$dimension.x2_5
		paddingY	$dimension.x2_5
	icon	size	18px

size=large

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x13
		cornerRadius	$radius.r3
	progressCircle	size	18px
		thickness	2px

size=large, layout=withText

상태	슬롯	속성	값
enabled	root	gap	$dimension.x2
		paddingX	$dimension.x5
		paddingY	$dimension.x3_5
	prefixIcon	size	22px
	suffixIcon	size	22px
	label	fontSize	$font-size.t6
		lineHeight	$line-height.t6

size=large, layout=iconOnly

상태	슬롯	속성	값
enabled	root	minWidth	$dimension.x13
		paddingX	$dimension.x3_5
		paddingY	$dimension.x3_5
	icon	size	22px