Box Toggle Button
Primitive선택 여부를 켜거나 끌 수 있는 박스 모양의 버튼입니다.
구조도
- Root : Button 컴포넌트를 감싸는 컨테이너 영역
- Label : Button에 대한 정보를 전달하는 라벨
- Prefix Icon : Button에 대한 정보를 전달하는 아이콘
- Suffix Icon
컴포넌트 미리보기
옵션
Size
Box Toggle Button은 xsmall, small, medium, large 4개의 사이즈를 가질 수 있습니다. medium이 가장 보편적으로 사용되며, 페이지 내의 중요도와 시각적 균형에 맞게 적절하게 사용합니다.
Variant
Box Toggle Button은 primary, primary-low, secondary 3개의 스타일 옵션을 가질 수 있습니다. 기본값은 primary입니다.
Disabled
Disabled 상태는 Box Toggle Button이 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을 사용자에게 알려줍니다.
옵션 테이블
| 속성 | 값 | 기본값 |
| size | xsmall, small, medium, large | medium |
| variant | primary, primary-low, secondary | primary |
| is disabled | true, false | false |
| prefix icon | Icon | |
| suffix icon | Icon |
상호작용
터치 / 마우스 상호작용
터치 혹은 마우스 클릭으로 Box Toggle Button과 상호작용할 수 있는 영역입니다.
PC 환경에서 버튼에 Hover시 커서가 포인터 모양으로 변경됩니다.
Loading / Disabled 상태인 경우 상호작용이 불가능합니다.
키보드 상호작용
Space 또는 Enter 키를 통해 selected 상태를 전환할 수 있습니다.
Loading
Loading 상태인 경우 Focus는 가능하지만 상호작용할 수 없습니다.
Disabled
Disabled 상태인 경우 상호작용할 수 없습니다.
가이드라인
Selected State
유저가 Selected State를 명확하게 인지할 수 있도록, Selected variant를 올바르게 사용합니다.
Label
Box Button이 아닌, Selected 가 가능한 Toggle Button이라는 점을 유저가 인지할 수 있도록 Label을 명확하게 작성합니다.
Do / Don't
Don't
Unselected 와 Selected 배리언츠를 올바르게 사용합니다. Selected인 경우 해당 State를 잘 나타낼 수 있는 Label 을 사용할 것을 권장합니다.
Don't
Unselected 와 Selected 배리언츠를 반대로 사용하지 않습니다.