IconButton

A compact, icon-only button designed for toolbar actions and inline controls. Includes an accessible label, an optional tooltip on hover, and a loading spinner. Built with class-variance-authority for consistent sizing and color variants.

Import

import { IconButton } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

import { Icon } from '@wavebooking/aqua-fusion';
 
<IconButton
  icon={<Icon name="PencilIcon" />}
  label="Edit"
/>
 
<IconButton
  icon={<Icon name="TrashIcon" />}
  label="Delete"
  variant="destructive"
  size="sm"
/>
 
<IconButton
  icon={<Icon name="ArrowPathIcon" />}
  label="Refresh"
  loading
/>

Props

Prop	Type	Default	Description
`icon`*	ReactElement	-	The icon element to display inside the button.
`label`*	string	-	Accessible label for the button. Also used as the tooltip text.
`variant`	'default' \| 'primary' \| 'ghost' \| 'destructive' \| 'inverse'	`'default'`	Visual style variant of the button.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size of the button. Icon size is automatically matched.
`showTooltip`	boolean	`true`	Whether to show a tooltip on hover.
`tooltipPlacement`	'top' \| 'bottom' \| 'left' \| 'right'	`'top'`	Placement of the tooltip relative to the button.
`loading`	boolean	`false`	Whether the button is in a loading state. Shows a spinner and disables interaction.
`disabled`	boolean	`false`	Whether the button is disabled.
`className`	string	-	Additional CSS classes to apply.

The component also accepts all standard HTML <button> attributes except children.