Components

Action Button

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

Figma

In Progress

iOS

Done

Android

Done

개요

옵션 테이블

속성	값	기본값
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-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.layer-default
		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.layer-default-pressed
disabled	root	color	$color.bg.layer-default
		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.layer-default

variant=brandOutline

상태	슬롯	속성	값
enabled	root	color	$color.bg.layer-default
		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.layer-default-pressed
disabled	root	color	$color.bg.layer-default
		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.layer-default

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.layer-default-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.layer-default-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

Last updated on

Tone and Manner

Previous Page

Alert Dialog

사용자의 주의가 필요한 중요한 정보를 전달하거나 확인을 요청하는 모달 컴포넌트입니다. 삭제 확인과 같은 중요한 의사결정이 필요할 때 사용됩니다.

On this page

개요 옵션 테이블 스펙