Segmented Control

서로 배타적인 옵션 중 하나를 선택할 수 있게 해주는 컴포넌트입니다. 2-5개의 밀접하게 관련된 선택지를 제공할 때 사용됩니다.

Figma

Done

iOS

Not Ready

Android

Not Ready

개요

옵션 테이블 (Segment)

속성	값	기본값
selected	true, false	false
disabled	true, false	false
label	string

스펙 (Segmented Control)

base

상태	슬롯	속성	값
enabled	root	padding	$dimension.x1
		cornerRadius	$radius.full
		color	$color.bg.neutral-weak
	indicator	color	$color.palette.gray-00
		cornerRadius	$radius.full
		strokeWidth	1px
		strokeColor	$color.stroke.neutral-muted
		transformDuration	$duration.d4
		transformTimingFunction	$timing-function.easing

스펙 (Segmented Control Item)

base

상태	슬롯	속성	값
enabled	root	minWidth	86px
		minHeight	34px
		paddingX	$dimension.x6
		paddingY	$dimension.x1_5
		cornerRadius	$radius.full
		gap	$dimension.x1_5
		colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
	label	fontSize	$font-size.t5
		lineHeight	$line-height.t5
		fontWeight	$font-weight.bold
		color	$color.fg.neutral-subtle
		colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
pressed	root	color	$color.bg.neutral-weak-pressed
selected	label	color	$color.fg.neutral
selected, pressed	root	color	$color.palette.gray-100
disabled	label	color	$color.fg.disabled
disabled, selected	root	color	$color.bg.disabled

Last updated on

Reaction Button

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

Select Box

드롭다운 목록에서 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 제한된 공간에서 많은 선택지를 효율적으로 제공할 때 사용됩니다.

On this page

개요 옵션 테이블 (Segment)스펙 (Segmented Control)스펙 (Segmented Control Item)