Reaction Button

사용자가 콘텐츠에 대한 반응을 표현할 수 있게 해주는 컴포넌트입니다. 좋아요, 관심있어요 등의 감정적 피드백을 간편하게 제공할 때 사용됩니다.

Figma

Done

React

Done

iOS

Not Ready

Android

Not Ready

옵션 테이블

속성	값	기본값
size	xsmall, small	small
disabled	true, false	false
loading	true, false	false
prefix icon	icon
count	number

Specification

base

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.neutral-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)
		strokeWidth	1px
		color	$color.bg.transparent
		colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
	label	color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
		fontWeight	$font-weight.medium
	count	color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
		fontWeight	$font-weight.bold
	prefixIcon	color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
	progressCircle	trackColor	$color.palette.gray-500
		rangeColor	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
pressed	root	color	$color.bg.transparent-pressed
selected	root	color	$color.bg.transparent
		strokeColor	$color.stroke.brand-weak 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak)
		strokeWidth	1px
	label	color	$color.fg.brand 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다.
	count	color	$color.fg.brand 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다.
	prefixIcon	color	$color.fg.brand 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다.
	progressCircle	trackColor	$color.palette.carrot-200
		rangeColor	$color.fg.brand 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다.
selected, pressed	root	color	$color.bg.transparent-pressed
disabled	root	color	$color.bg.disabled
		strokeWidth	0px
	label	color	$color.fg.disabled
	count	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.neutral-weak-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-pressed)
selected, loading	root	color	$color.bg.transparent-pressed
		strokeWidth	1px

size=xsmall

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x8
		cornerRadius	$radius.full
		gap	$dimension.x1
		paddingX	$dimension.x3
		paddingY	$dimension.x1_5
	prefixIcon	size	18px
	label	fontSize	$font-size.t3
		lineHeight	$line-height.t3
	count	fontSize	$font-size.t3
		lineHeight	$line-height.t3
	progressCircle	size	14px
		thickness	2px

size=small

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x9
		cornerRadius	$radius.full
		gap	$dimension.x1
		paddingX	$dimension.x3_5
		paddingY	$dimension.x2
	prefixIcon	size	18px
	label	fontSize	$font-size.t3
		lineHeight	$line-height.t3
	count	fontSize	$font-size.t3
		lineHeight	$line-height.t3
	progressCircle	size	14px
		thickness	2px

Reaction Button

옵션 테이블

Specification

base

size=xsmall

size=small

On this page