IconButton

A button component specifically designed for icons. Supports multiple sizes, variants, and color schemes.

Basic Usage

import { IconButton } from 'uiplex';
import { Mail } from 'feather-icons-react';

<IconButton aria-label="Mail" icon={<Mail size={18} />} />

Sizes

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

Variants

<IconButton aria-label="Ghost" icon={<Mail />} variant="ghost" />
<IconButton aria-label="Outline" icon={<Edit />} variant="outline" />
<IconButton aria-label="Solid" icon={<Heart />} variant="solid" />

Round

<IconButton
  aria-label="Round"
  icon={<Mail />}
  variant="ghost"
  isRound
/>

States

<IconButton aria-label="Normal" icon={<Mail />} />
<IconButton aria-label="Disabled" icon={<Mail />} isDisabled />

API Reference

Prop	Type	Default	Description
icon	React.ReactNode	-	Icon element to display (required)
aria-label	string	-	Accessibility label (required)
size	"xs" \| "sm" \| "md" \| "lg"	"md"	Size of the icon button
variant	"ghost" \| "outline" \| "solid"	"ghost"	Visual style variant
colorScheme	"blue" \| "green" \| "red" \| "yellow" \| "purple" \| "gray"	-	Color scheme (for solid variant)
isRound	boolean	false	Whether button is circular
isDisabled	boolean	false	Whether button is disabled
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles