Icon Button
설치 확인아이콘만 있는 버튼. Button의 icon 크기와 레이블 규칙
1. 목적과 출처
아이콘만 있는 버튼. Button의 icon 크기와 레이블 규칙
- 출처
- 기존 컴포넌트 조합
- 프로젝트
src/components/ui/icon-button.tsx- Registry
@adcapsule/icon-button
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| variant | xs | sm | default | lg |
|---|---|---|---|---|
| default | ||||
| secondary | ||||
| outline | ||||
| ghost | ||||
| destructive |
3. 속성 바꿔 보기
variant
size
4. 설치와 사용
- npm 패키지
- 없음
- 함께 설치
- @adcapsule/button
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- label(필수, aria-label·title)
- variant(기본 ghost)
- size: xs·sm·default·lg
공통으로 유지할 토큰
- control.height.sm·md·lg (정사각형 크기)
- radius.md (6px)
- surface.hover (ghost 가리킴)