Icon Button
The Icon Button component renders a button with an icon. It supports various actions, including external links and loading states.
Usage
Default IconButton
<IconButton icon={FaPlus} ariaLabel="Add" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | - | The icon element to display inside the button (e.g., FaPlus). Required. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Theme color for the button. |
| state | "success" | "error" | "warning" | - | State variant (success, warning, error). |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Size of the button. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius/rounding of the button. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow effect for the button. |
| outline | boolean | false | Show button as outlined style. |
| loading | boolean | false | Displays a spinner instead of the icon when true. |
| disabled | boolean | false | Disables the button and makes it non-interactive. |
| href | string | - | If set, renders as a link (<a> or custom LinkComponent). |
| isExternal | boolean | false | If true, opens the link in a new tab (for external links). |
| ariaLabel | string | - | Accessible label for screen readers (required if only icon). |
| title | string | - | Native title tooltip (optional, falls back to ariaLabel). |
| tabIndex | number | - | Tab order for keyboard navigation. |
| onClick | (event) => void | - | Callback fired on button click. |
| onKeyDown | (event) => void | - | Callback fired on keydown events. |
| className | string | - | Additional CSS class(es) to apply. |
| type | "button" | "submit" | "reset" | "button" | Button type (button, submit, reset). |
| data-testid | string | "icon-button" | Custom data-testid for testing. |