IconButton

An icon-only button for toolbar actions, close buttons, and compact UI. Requires aria-label for accessibility.

Import

import { IconButton } from '@kikumi3n/ui';

Usage

<IconButton icon={<TrashIcon />} aria-label="Delete item" />
<IconButton icon={<EditIcon />} aria-label="Edit" variant="secondary" />
<IconButton icon={<CloseIcon />} aria-label="Close" variant="ghost" />

Variants

Variant	Default	Usage
primary	—	Primary actions
secondary	—	Secondary actions
ghost	✅	Toolbar, minimal UI
danger	—	Destructive actions

Sizes

<IconButton icon={<Icon />} aria-label="Action" size="sm" />
<IconButton icon={<Icon />} aria-label="Action" size="md" />
<IconButton icon={<Icon />} aria-label="Action" size="lg" />

API

Prop	Type	Default	Description
icon	ReactNode	required	Icon element
variant	'primary' | 'secondary' | 'ghost' | 'danger'	'ghost'	Visual variant
size	'sm' | 'md' | 'lg'	'md'	Button size
aria-label	string	required	Accessible label

Also accepts all standard <button> HTML attributes.

Accessibility

• aria-label is required — icon-only buttons have no visible text
• Renders as native <button> element
• Focus visible styling for keyboard navigation