IconButton

The IconButton component is a compact version of the button that renders only an icon. It's ideal for interfaces where space is limited or when the icon itself is clear enough to convey the desired action.

tsx

import { IconButton } from "@arkyn/components";

Basic usage

Basic usage of an icon button requires a icon and aria-label property.

tsx

<IconButton icon={Search} aria-label="Search" />

Accessibility

The aria-label property is required to provide context for screen reader users.

tsx

// ✅ Correct - always provide aria-label
<IconButton icon={Save} aria-label="Save document" />

// ❌ Incorrect - aria-label is required
<IconButton icon={Save} />

Sizes

The available sizes are lg, md, sm, and xs. Each size offers a different height and padding, with icons being automatically resized (xs: 12px, sm: 16px, md: 20px, lg: 24px).

tsx

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

Variants

The available variants are solid, outline, ghost, and invisible. Each variant offers a different visual style, allowing you to create hierarchies and emphasize different types of actions in the interface.

tsx

<IconButton icon={Settings} aria-label="Settings" variant="solid" />
<IconButton icon={Settings} aria-label="Settings" variant="outline" />
<IconButton icon={Settings} aria-label="Settings" variant="ghost" />
<IconButton icon={Settings} aria-label="Settings" variant="invisible" />

Color Schemes

The available color schemes are primary, success, warning, danger, and info. Each scheme conveys a specific semantic meaning and helps users understand the type of action that will be performed.

tsx

<IconButton icon={Info} aria-label="Information" scheme="primary" />
<IconButton icon={Heart} aria-label="Like" scheme="success" />
<IconButton icon={AlertTriangle} aria-label="Warning" scheme="warning" />
<IconButton icon={Trash2} aria-label="Delete" scheme="danger" />
<IconButton icon={Bell} aria-label="Notification" scheme="info" />

Disabled Button

The button's disabled state indicates that it cannot be clicked or interacted with. It is activated by the disabled property or when it is in the isLoading loading state.

tsx

<IconButton icon={Plus} aria-label="Add" disabled />
<IconButton icon={Heart} aria-label="Like" disabled scheme="success" />
<IconButton icon={Star} aria-label="Favorite" disabled variant="outline" />

Loading State

The loading state is used to indicate that an operation is in progress by displaying an animated spinner in place of the original icon and automatically disabling the button.

tsx

<IconButton icon={Save} aria-label="Saving" isLoading />
<IconButton icon={Upload} aria-label="Sending" isLoading scheme="success" />
<IconButton icon={Trash2} aria-label="Deleting" isLoading scheme="danger" />

Properties

icon - LucideIcon (required) Icon to render inside the button

aria-label - string (required) Accessible label for screen readers

isLoading - boolean (default: false) Controls the loading state with a spinner

size - "xs" | "sm" | "md" | "lg" (default: "md") Button size

variant - "solid" | "outline" | "ghost" | "invisible" (default: "solid") Button visual variant

scheme - "primary" | "success" | "warning" | "danger" | "info" (default:"primary"`) Button Color Scheme

Other Properties

All other standard HTML properties for <button> are also supported, except children and aria-label (which is required).

Notes

The loading state displays an animated spinner from the Lucide React library

On this page