아이콘 버튼

라벨을 화면에 표시하기 어려운 툴바와 좁은 영역에서 단일 액션을 실행합니다. aria-label은 아이콘의 의미를 보조 기술에 전달합니다.

활용 방법

툴바 액션

variant와 tone으로 강조 정도와 위험 의미를 분리합니다.

Preview

tsx

<IconButton aria-label="알림">
  <Bell />
</IconButton>
<IconButton aria-label="삭제" variant="ghost" tone="danger">
  <Trash2 />
</IconButton>

표 안의 작은 단추 · 옅은 면

xs(24px)는 표 행 · 칸처럼 촘촘한 자리에 쓴다. soft 는 옅은 면으로 보조 강조한다.

Preview

tsx

<IconButton aria-label="달력 열기" size="xs" variant="ghost">
  <Calendar size={13} />
</IconButton>
<IconButton aria-label="행 삭제" size="xs" variant="soft" tone="danger">
  <Trash2 size={13} />
</IconButton>

속성

이름	타입	기본값	설명
aria-label	string	-	필수 접근 가능한 이름
size	"xs" \| "sm" \| "md" \| "lg"	"md"	버튼 크기. xs(24px)는 표 행 · 칸 안처럼 촘촘한 자리
variant	"solid" \| "soft" \| "outline" \| "ghost"	"outline"	배경과 경계 표현. soft 는 옅은 면
tone	"neutral" \| "accent" \| "success" \| "warning" \| "danger"	"neutral"	의미적 강조
className	string	-	button root 클래스