'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Actions
IconButton
A button with only an icon, for toolbars and compact places. Needs an aria-label.
Ant Design: Button shape="circle"
import { IconButton } from '@alea/ui';
Examples
Icon buttons
Every look of Button, with an aria-label instead of a visible label. Add a Tooltip with the same words.
Sizes and shapes
Circle by default, square with the control radius.
Props
IconButton props
A button with only an icon. aria-label is required.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-labelrequired | string | - | What the button does, for screen readers (the icon has no text). |
childrenrequired | ReactNode | - | The icon. |
isLoading | boolean | - | Shows a spinner, keeps the width and tells screen readers it is busy. |
shape | "circle" | "square" | 'circle' | circle (default) or square with the control radius. |
size | "sm" | "md" | "lg" | - | sm 32 px, md 40 px (default), lg 48 px. |
variant | "primary" | "secondary" | "ghost" | "danger" | "link" | 'ghost' | primary: the dark gradient button; secondary: the chip (white on dark, black on light); ghost: outlined; danger: destructive; link: text only. |
Accessibility
- aria-label is required by the types: the icon alone has no name.
- Pair it with a Tooltip that repeats the label for sighted mouse users.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Presses it |
Do and don't
Do
- Use well known icons (close, search, more).
- Add a Tooltip with the same text as the label.
Don't
- Don't use it for the main action of a screen: a labelled Button is clearer.
In Figma
Icon button set: Variant × Size × Shape (Circle, Square) × State.