Foundation

Buttons

Control

Display

Feedback

Navigation

Toggle Button

시스템의 설정이나 기능을 켜고 끄는(On/Off) 상태를 즉각적으로 전환할 때 사용하는 버튼입니다.

컴포넌트 명세 (Component Specification)

Anatomy

toggleButton

기본 기능

사용자의 상호작용을 통해 특정 조건이나 기능을 켜고 끄는 상태를 변경하는 버튼

시각 옵션

해당 없음

상태

off

on

내부 구성

icon

사이즈 가이드 (Size Guide )

Toggle Butto 크기는 50*32px로 제공됩니다.

상태 (State)

Toggle Button의 상태는 Off, On 총 2가지 State로 구성됩니다.

사용 예시 (Use Case)

실제 서비스 화면에서 Toggle Button이 배치되고 활용되는 패턴입니다.

리스트 필터 (Toggle with List)

목록 항목의 우측 끝에 배치되어, '전자결재', '공용메일' 등
개별 항목의 사용 여부를 독립적으로 제어할 때 사용합니다.

마스터 컴포넌트 (Master Component)

Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.