컴포넌트
Toggles

Toggles

Toggle(스위치)는 On/Off 두 가지 상태를 가지는 컨트롤입니다. 설정 화면에서 기능을 켜거나 끄는 데 사용합니다.

Figma 컴포넌트: Toggle


Type: Default

기본 토글 스위치입니다.

Toggle Only

With Label

Remember meSave my login details for next time.
Remember meSave my login details for next time.
Remember meSave my login details for next time.
Remember meSave my login details for next time.
Remember meSave my login details for next time.
Remember meSave my login details for next time.
Remember meSave my login details for next time.
Remember meSave my login details for next time.

Type: Slim

더 얇은 형태의 토글입니다.

Toggle Only

With Label

Remember meSave my login details for next time.
Remember meSave my login details for next time.
Remember meSave my login details for next time.
Remember meSave my login details for next time.

Size

sm, md 두 가지 사이즈를 지원합니다.

SM with Label

Remember meSave my login details for next time.
Remember meSave my login details for next time.

Props

PropTypeDefaultDescription
type'default' | 'slim''default'토글 타입 (기본 또는 슬림)
size'sm' | 'md''md'토글 크기
pressedbooleanfalseOn/Off 상태
state'default' | 'hover' | 'focus' | 'disabled''default'토글 상태 (문서 시각화용)
labelstring-레이블 텍스트
descriptionstring-부가 설명 텍스트

Figma Variants

PropertyValues
TypeDefault Slim
Sizesm md
PressedTrue False
StateDefault Hover Focus Disabled
TextTrue False