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
| Type | Description | |
|---|---|---|
| aria-atomic | boolean | Indicates whether screen readers should present all of a live region at once. |
| aria-busy | boolean | Indicates whether the button is busy, such as while loading. |
| aria-checked | boolean | "mixed" | Indicates the current checked state when the icon button behaves like a checkable control. |
| aria-controls | string | Identifies the element whose contents or presence are controlled by this button. |
| aria-current | boolean | "page" | "step" | "location" | "date" | "time" | Indicates the current active item within a related set, when applicable. |
| aria-describedby | string | Optional ID reference to one or more elements that describe this control. |
| aria-errormessage | string | Optional ID reference to an error message element for this control. |
| aria-expanded | boolean | Indicates whether the associated popup element is currently expanded. |
| aria-haspopup | boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | Indicates whether activating the control opens a popup element such as a menu or dialog. |
| aria-invalid | boolean | Indicates whether the control is currently invalid. |
| aria-label | string | Accessible label for screen readers. Required for icon-only usage unless title is provided. |
| aria-labelledby | string | Optional ID reference to one or more elements that label this control. |
| aria-live | "off" | "polite" | "assertive" | Indicates whether the element should be announced as live region content. |
| aria-pressed | boolean | "mixed" | Indicates the current pressed state for toggle-style icon buttons. |
| aria-selected | boolean | Indicates the current selected state when used in selectable patterns. |
| className | string | Custom class name for additional styling. |
| data-testid | string | Optional test ID for testing frameworks. |
| disabled | boolean | Whether the button should be disabled. |
| href | string | Optional href to turn the button into a link. |
| icon | ComponentType<{ className?: string; "aria-hidden"?: boolean; focusable?: boolean; "data-testid"?: string; }> | Icon component to render inside the button. Should be a React component, e.g., from `react-icons`. |
| iconClassName | string | Custom class name for the icon. |
| id | string | Optional id for the root button or link element. |
| isExternal | boolean | If true, opens the link in a new tab (used with `href`). |
| loading | boolean | Whether to show a loading spinner instead of the icon. |
| onClick | ((e: React.MouseEvent<HTMLElement>) => void) | Click event handler for the button. |
| outline | boolean | Whether the button should use an outline style. |
| rel | string | Optional rel attribute for link mode. |
| role | React.AriaRole | Optional role override for advanced accessible interaction patterns. |
| rounding | RoundingType | Rounding style of the button. One of: "none" | "small" | "medium" | "large" | "full" |
| shadow | ShadowType | Shadow style of the button. One of: "none" | "light" | "medium" | "strong" | "intense" |
| size | SizeType | Size of the button. One of: "xs" | "small" | "medium" | "large" | "xl" |
| state | StateType | State of the button. One of: "success" | "error" | "warning" | "disabled" | "" |
| tabIndex | number | Optional tab index override. |
| target | React.HTMLAttributeAnchorTarget | Optional target attribute for link mode. |
| theme | ThemeType | Theme style of the button. One of: "primary" | "secondary" | "tertiary" | "quaternary" | "clear" |
| title | string | Title attribute (native browser tooltip text). |
| tooltip | string | Tooltip text (not rendered automatically—use `title` for built-in browser tooltip). |
| type | "button" | "reset" | "submit" | Native button type. One of: "button" | "reset" | "submit" |