Actions
IconButton
A square button with only an icon. The label is required and shown as a tooltip.
Live example
Added 0 items
Usage
<IconButton label="Delete booking" icon={<Icon name="trash" />} onClick={remove} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | none | Accessible name, also shown in a tooltip on hover and focus. |
icon | ReactNode | none | The icon. Hidden from assistive technology. |
variant? | 'secondary' | 'ghost' | 'danger' | 'ghost' | Visual weight. |
size? | 'sm' | 'md' | 'lg' | 'md' | Square size. |
showTooltip? | boolean | true | Show the label as a tooltip. |
Do and don't
Do
- Use for repeated row actions where a text label would be noisy.
- Write the label as the full action: "Delete booking BKG-0012".
Don't
- Use an icon whose meaning is not widely known without a visible label nearby.
- Rely on the tooltip as the only name; the label prop is the name.
Accessibility
- The label becomes aria-label. The tooltip repeats it visually and is aria-hidden, so it is not read twice.
- Minimum target size is 28 by 28 px at the smallest size, meeting WCAG 2.2 target size (minimum).
Keyboard
| Keys | Action |
|---|---|
| Enter, Space | Activates the button |
| Escape | Hides the tooltip |