Toggle Button

사용자가 특정 상태를 켜거나 끌 수 있게 해주는 버튼 형태의 컴포넌트입니다. 필터링이나 뷰 전환과 같은 즉각적인 상태 변경에 사용됩니다.

Figma

Not Ready

iOS

Done

Android

Done

개요

상태	슬롯	속성	값
enabled	root	color	$color.bg.brand-solid
	label	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
selected	root	color	$color.bg.neutral-weak
	label	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
	progressCircle	trackColor	$color.palette.gray-500
		rangeColor	$color.fg.neutral
selected, pressed	root	color	$color.bg.neutral-weak-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.brand-solid-pressed
selected, loading	root	color	$color.bg.neutral-weak-pressed

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
	label	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
selected	root	color	$color.bg.neutral-weak
	label	color	$color.fg.neutral
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
	progressCircle	trackColor	$color.palette.gray-500
		rangeColor	$color.fg.neutral
selected, pressed	root	color	$color.bg.neutral-weak-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
loading	root	color	$color.bg.neutral-weak-pressed
selected, loading	root	color	$color.bg.neutral-weak-pressed