IconButton
Square icon-only button with the same variant and size scale as Button.
Props
IconButton extends ButtonHTMLAttributes<HTMLButtonElement>. It uses an icon prop in place of children and requires an aria-label for accessibility.
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | The icon to display. |
aria-label | string | — | Accessible label for the button. |
variant | ButtonVariant | "ghost" | "default" | "primary" | "outline" | "ghost" | "danger" |
size | ButtonSize | "md" | "sm" | "md" |
disabled | boolean | — | Prevents interaction. |
loading | boolean | — | Swaps the icon for a Spinner and disables the button. |
Examples
Variants
Sizes
Disabled
import { IconButton } from "@solarius/onset";
import { IconSearch } from "@tabler/icons-react";
<IconButton icon={<IconSearch size={14} />} aria-label="Search" />;