Icon Button
A button that only holds an icon. For well-known actions in tight spaces.
Sizes and loading
Usage
import { IconButton } from '@smartui/react';
import '@smartui/react/styles.css';When to use
- Actions whose icon is widely understood: close, back, menu.
- Repeated actions in table rows.
When not to use
- The main action of a screen. Use Button with a label.
- Icons whose meaning has to be guessed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | Not visible. Read by screen readers. |
variant | 'neutral' | 'ghost' | 'soft' | 'primary' | 'danger-soft' | 'glass' | 'neutral' | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | |
isLoading | boolean | false | |
onPress | (e) => void | - |
Accessibility
- The label is required even though it is not visible.
- Pair it with Tooltip on web so sighted users get the same name.