Toggle Button
사용자가 특정 상태를 켜거나 끌 수 있게 해주는 버튼 형태의 컴포넌트입니다. 필터링이나 뷰 전환과 같은 즉각적인 상태 변경에 사용됩니다.
개요
옵션 테이블
| 속성 | 값 | 기본값 |
|---|---|---|
| variant | brand solid, neutral weak | |
| size | xsmall, small | small |
| disabled | true, false | false |
| loading | true, false | false |
| prefix icon | icon | |
| suffix icon | icon |
스펙
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | colorDuration | |
| colorTimingFunction | |||
| label | fontWeight |
variant=brandSolid
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| progressCircle | trackColor | ||
| rangeColor | |||
| pressed | root | color | |
| selected | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| progressCircle | trackColor | ||
| rangeColor | |||
| selected, pressed | root | color | |
| disabled | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| loading | root | color | |
| selected, loading | root | color |
variant=neutralWeak
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| progressCircle | trackColor | ||
| rangeColor | |||
| pressed | root | color | |
| selected | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| progressCircle | trackColor | ||
| rangeColor | |||
| selected, pressed | root | color | |
| disabled | root | color | |
| label | color | ||
| prefixIcon | color | ||
| suffixIcon | color | ||
| loading | root | color | |
| selected, loading | root | color |
size=xsmall
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | minHeight | |
| cornerRadius | |||
| gap | |||
| paddingX | |||
| paddingY | |||
| prefixIcon | size | ||
| suffixIcon | size | ||
| label | fontSize | ||
| lineHeight | |||
| progressCircle | size | 14px | |
| thickness | 2px |
size=small
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | minHeight | |
| cornerRadius | |||
| gap | |||
| paddingX | |||
| paddingY | |||
| prefixIcon | size | ||
| suffixIcon | size | ||
| label | fontSize | ||
| lineHeight | |||
| progressCircle | size | 14px | |
| thickness | 2px |
Last updated on