Actions

IconButton

아이콘만으로 액션을 표현하는 버튼.

툴바·헤더·테이블 행 등 공간이 좁고 액션 의미가 아이콘으로 충분할 때. 시각 라벨이 없으므로 aria-label이 필수.

import { IconButton } from "@nxtgen-org/react";

Variants

4 variants

tsx

1<IconButton aria-label="검색" icon={<Search size={18} />} variant="primary" />
2<IconButton aria-label="설정" icon={<Settings size={18} />} variant="secondary" />
3<IconButton aria-label="더보기" icon={<MoreHorizontal size={18} />} variant="ghost" />
4<IconButton aria-label="삭제" icon={<Trash2 size={18} />} variant="danger" />

Sizes

sm / md / lg

tsx

1<IconButton aria-label="좋아요" icon={<Heart size={14} />} size="sm" />
2<IconButton aria-label="좋아요" icon={<Heart size={18} />} size="md" />
3<IconButton aria-label="좋아요" icon={<Heart size={22} />} size="lg" />

API

Name	Type	Default	Description
icon*	ReactNode	—	표시할 아이콘.
aria-label*	string	—	스크린리더 라벨.
variant	"primary" \| "secondary" \| "ghost" \| "danger"	"ghost"	—
size	"sm" \| "md" \| "lg"	"md"	—
asChild	boolean	false	Radix Slot.
...props	ButtonHTMLAttributes<HTMLButtonElement>	—	—