Default IconButton
default-iconbutton.tsx
<IconButton icon={FaPlus} ariaLabel="Add" />Icon Button
The Icon Button component renders a button with an icon. It supports various actions, including external links and loading states.
Usage & Examples
Props API
42 props
Columns
Default | Description | ||||
|---|---|---|---|---|---|
aria-atomic | boolean | No | aria | — | Indicates whether screen readers should present all of a live region at once. |
aria-busy | boolean | No | aria | — | Indicates whether the button is busy, such as while loading. |
aria-checked | boolean | "mixed" | No | aria | — | Indicates the current checked state when the icon button behaves like a checkable control. |
aria-controls | string | No | aria | — | Identifies the element whose contents or presence are controlled by this button. |
aria-current | boolean | "page" | "step" | "location" | "date" | "time" | No | aria | — | Indicates the current active item within a related set, when applicable. |
aria-describedby | string | No | aria | — | Optional ID reference to one or more elements that describe this control. |
aria-errormessage | string | No | aria | — | Optional ID reference to an error message element for this control. |
aria-expanded | boolean | No | aria | — | Indicates whether the associated popup element is currently expanded. |
aria-haspopup | boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | No | aria | — | Indicates whether activating the control opens a popup element such as a menu or dialog. |
aria-invalid | boolean | No | aria | — | Indicates whether the control is currently invalid. |
aria-label | string | No | aria | — | Accessible label for screen readers. Required for icon-only usage unless title is provided. |
aria-labelledby | string | No | aria | — | Optional ID reference to one or more elements that label this control. |