Emphasis
Size
Small
Default
Large
Choose an action to see its result.
IconButton
A compact action with an Iconoir symbol and a clear text alternative.
Preview
Su uses the Quiet instrument direction. Use the mode switcher above to see light and dark.
Usage
- Use an icon button when its symbol is familiar and the surrounding context makes the action clear. Use Button when a visible label would explain the action better.
- Choose an icon from iconoir-react and provide an aria-label that names the action. The same label appears in the tooltip on hover or keyboard focus.
- IconButton shares Button’s square construction, hover lift, and press feedback. Use secondary or quiet for supporting actions and primary for the main action.
API
| Prop | Values | Default |
|---|---|---|
| icon | Iconoir component | required |
| aria-label | string | required |
| variant | primary | secondary | quiet | secondary |
| size | small | default | large | default |
| disabled | boolean | false |
| className | wrapper layout classes | — |
| button props | native attributes and event handlers | — |
Example
import { IconButton } from '@zao/react';
import { Settings } from 'iconoir-react';
<IconButton icon={Settings} aria-label="Open settings" />Accessibility
The required aria-label names the native button. The icon is hidden from assistive technology. The tooltip appears on hover or keyboard focus, can be hovered, and closes on Escape. Disabled buttons skip the tab order and do not activate. Keyboard focus and the hit area stay fixed while the face moves; reduced motion keeps the face stationary.