Toggle
설치 확인켜고 끄는 단일 버튼
1. 목적과 출처
켜고 끄는 단일 버튼
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/toggle.tsx- Registry
@adcapsule/toggle
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| variant | 꺼짐 | 켜짐 | 글자와 함께 | 비활성 |
|---|---|---|---|---|
| 기본 default | ||||
| 외곽선 outline |
3. 속성 바꿔 보기
꺼짐
variant
size
4. 설치와 사용
- npm 패키지
- @base-ui/react, class-variance-authority
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- variant: default·outline
- size: sm·default·lg
- pressed·onPressedChange로 제어
- 아이콘만 쓸 때 aria-label 필수
공통으로 유지할 토큰
- surface.raised (켜짐, --muted)
- border.strong (outline)
- control.height.sm·md·lg
- radius.md (6px)