Action Button

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

Figma

Done

React

Done

iOS

Done

Android

Done

Anatomy

Props

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

Size

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

Variant

Action Button은 Neutral Solid, Brand Solid, Neutral Weak, Brand Outline, Neutral Outline, Critical Solid 총 6가지 Variant로 구성됩니다.

Layout

Action Button은 라벨과 아이콘의 조합으로 구성되며, 아이콘은 버튼의 목적을 시각적으로 강조하거나 동작을 보조합니다.
라벨 앞, 뒤 또는 아이콘만으로 구성할 수 있어 상황에 맞게 유연하게 활용할 수 있습니다. 다만, 라벨 가독성을 해치지않도록 아이콘은 제한적으로 사용하는 것을 권장합니다.
Icon Only 레이아웃은 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.

State

Action Button은 Enabled, Pressed, Loading, Disabled 상태를 가집니다.

Width

Action Button은 컨테이너의 전체 너비를 채우거나 콘텐츠에 맞게 조정할 수 있습니다. 각 Size마다 기본 최소 너비가 설정되어 있으며, 필요에 따라 최소 너비와 최대 너비를 지정할 수 있습니다.

Guidelines

Hierarchy

Emphasis	Variant	화면 내 개수	Usage
High	Brand Solid, Neutral Solid, Critical Solid	1	가장 중요한 역할의 CTA에 사용
Medium	Neutral Weak, Brand Outline, Neutral Outline	여러 개	대부분의 액션에 사용, High emphasis 버튼과 조합하여 사용
Low	Ghost	여러 개	중요도가 낮은 보조 액션을 표현할 때 사용, Brand Outline, Neutral Outline을 조합하여 사용

Action Button의 시각적 주목도는 배경색 대비에 따라 달라집니다.
화면에서 강조하려는 정도에 따라 적절한 Variant를 선택해서 사용해주세요.

Variant Usage

화면 내 중요도에 따라 적절한 Variant를 선택해서 사용합니다.

Brand Solid: 브랜드의 핵심 가치를 전달하며, 사용자 간 연결이 일어나는 서비스의 주요 기능에 사용합니다. 위계가 높고 브랜드 임팩트가 강한 액션이므로 한 화면에 하나만 사용하는 것을 권장합니다.
Neutral Solid: Brand Solid 다음으로 높은 위계를 가지며, 대부분의 화면에서 CTA로 사용합니다. 고대비로 접근성과 가독성이 높아 사용자가 화면 정보에 집중할 수 있도록 돕습니다. 한 화면에 하나만 사용하는 것을 권장합니다.
Critical Solid: 삭제나 초기화처럼 되돌릴 수 없는 중요한 작업에 사용합니다. 사용자에게 위험을 분명하게 알려주는 역할을 하며, 주로 Alert Dialog에서 사용됩니다.
Neutral Weak: CTA를 제외한 대부분의 액션에 사용됩니다. Solid 타입이지만 시각적 부담이 적은 것이 특징입니다. CTA와 함께 사용할 경우 보조 액션 역할을 합니다.
Brand Outline : Solid 타입보다 중요도가 낮은 액션에 사용되며, Neutral Outline보다 높은 위계를 가집니다. Solid 타입과 함께 사용할 수 없으며, Neutral Outline과 조합하여 사용하는 것을 권장합니다.
Neutral Outline: 가장 낮은 위계를 가지며, 주로 보조 액션을 표현할 때 사용합니다. 시각적 주목도가 낮은 것이 특징입니다. Solid 타입과 함께 사용할 수 없으며, Brand Outline과 조합하여 사용하는 것을 권장합니다.

Brand Color Usage

Don't무분별하게 Brand 컬러를 사용하지 않습니다.

Brand 컬러는 브랜드의 정체성과 가치를 전달하는 중요 자산으로, 로고, 대표 버튼, 핵심 메시지 등 브랜드 상징 요소에 집중 사용해야 합니다.
Brand 컬러를 과다 사용하면 의미와 강조도가 분산됩니다. '이웃 간의 연결' 의미를 전달하는 곳에 사용하세요.
Action Button에서는 ‘채팅하기', ‘단골맺기'와 같이 사용자 간 연결이 일어나는 액션과 ‘글쓰기', ‘광고 올리기'와 같이 서비스 핵심 액션에 Brand 컬러를 적용할 수 있습니다.

Multiple Buttons

Solid Combination

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

Outline Combination

Neutral Outline과 Brand Outline은 강조도가 낮은 서브 액션을 표현하는 데 적합합니다. 두 버튼을 나란히 조합하면 위계를 명확히 전달할 수 있습니다. 한 화면에 버튼이 여러 번 나타날 때 사용을 권장합니다.

Layout

2개 이상의 버튼을 조합하여 사용하는 경우 상황에 따라 적절한 레이아웃을 구성해야 합니다.
Solid 조합에서 Neutral Weak가 초기화, 닫기와 같이 Dismiss의 의미를 가질 경우 3:7 비율을 활용해 액션 위계를 명확히 표현하는 것을 권장합니다.
Neutral Weak처럼 강조 위계가 낮은 Variant는 비슷한 위계의 액션 두 개를 나란히 사용할 수 있습니다. 액션이 두 개를 초과할 경우, Icon Only 버튼을 활용해 사용자가 추가 액션을 확인할 수 있도록 합니다.

Long Label

긴 Label이 필요하거나 번역했을 때 의도하지 않게 길어지는 경우, 폰트 스케일링으로 큰 텍스트를 사용하는 경우 Action Button 레이아웃이 Overflow될 수 있습니다.
이 경우 구현체에서 Responsive Pair 유틸리티를 사용하여 설정된 로직에 따라서 자동으로 레이아웃을 전환할 수 있습니다.

With Icon

Don't아이콘을 무분별하게 사용하지 않습니다.

Don't라벨의 앞과 뒤에 아이콘을 동시에 표시할 수 없습니다.

아이콘은 버튼의 동작을 시각적으로 표현하고 강조하는 데 도움을 줍니다.
아이콘은 라벨의 앞이나 뒤에 배치할 수 있으며, Prefix는 주로 액션의 의미를 보조하고, Suffix는 Chevron처럼 동작을 보조하는 역할을 합니다.
라벨의 가독성을 해치지 않도록 아이콘은 꼭 필요한 경우에만 제한적으로 사용하는 것을 권장합니다.

Comparision

Action Button vs Chip

Action Button과 Chip은 유사한 형태를 가진 컴포넌트이지만, 사용 목적과 제공하는 기능에 차이가 있습니다.

	Action Button	Chip
목적	액션 실행	정보 표현 + 선택 표현
예시	‘완료’, ‘제출’, ‘다음’, ‘삭제’	필터 (‘서초4동 외 34'), 옵션 선택 (‘0~6개월')
표현	Label만 봐도 액션이 예상됨	선택하거나 활성화된 내용을 표시
목적	어떠한 행동을 하는지 인지하는 것이 중요	현재 어떤 조건/정보가 활성 상태인지 확인하는 게 중요
패턴	단일로도 사용 가능	2개 이상 그룹으로 사용 권장

Differences from V2

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

Spec

base

상태	슬롯	속성	값
enabled	root	colorDuration	$duration.color-transition
		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-300
		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-300
		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-300
		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.transparent
		strokeColor	$color.stroke.neutral-muted
		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.transparent-pressed
disabled	root	color	$color.bg.transparent
		strokeColor	$color.stroke.neutral-muted
	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.transparent

variant=brandOutline

상태	슬롯	속성	값
enabled	root	color	$color.bg.transparent
		strokeColor	$color.stroke.neutral-muted
		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.transparent-pressed
disabled	root	color	$color.bg.transparent
		strokeColor	$color.stroke.neutral-muted
	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.transparent

variant=ghost

상태	슬롯	속성	값
enabled	root	color	#ffffff00
	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.transparent-pressed
disabled	root	color	#ffffff00
	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.transparent-pressed

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_5
		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

Action Button

base

variant=brandSolid

variant=neutralSolid

variant=neutralWeak

variant=criticalSolid

variant=neutralOutline

variant=brandOutline

variant=ghost

size=xsmall

size=xsmall, layout=withText

size=xsmall, layout=iconOnly

size=small

size=small, layout=withText

size=small, layout=iconOnly

size=medium

size=medium, layout=withText

size=medium, layout=iconOnly

size=large

size=large, layout=withText

size=large, layout=iconOnly

On this page