아이콘 버튼
라벨을 화면에 표시하기 어려운 툴바와 좁은 영역에서 단일 액션을 실행합니다. aria-label은 아이콘의 의미를 보조 기술에 전달합니다.
활용 방법
툴바 액션
variant와 tone으로 강조 정도와 위험 의미를 분리합니다.
Preview
tsx
<IconButton aria-label="알림"><Bell /></IconButton><IconButton aria-label="삭제" variant="ghost" tone="danger"><Trash2 /></IconButton>
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| aria-label | string | - | 필수 접근 가능한 이름 |
| size | "sm" | "md" | "lg" | "md" | 버튼 크기 |
| variant | "solid" | "outline" | "ghost" | "outline" | 배경과 경계 표현 |
| tone | "neutral" | "accent" | "danger" | "neutral" | 의미적 강조 |
| className | string | - | button root 클래스 |