Icon Button
A button that renders a single icon with no visible label, designed for compact actions where the icon alone communicates intent. Always provide an aria-label so the button remains accessible to screen readers.
1<IconButton icon={<IconPencil />} aria-label="Edit" />
2
Usage
1import { IconButton } from "atlas";
2import { IconPencil } from "central-icons";
3
4<IconButton
5 icon={<IconPencil />}
6 aria-label="Edit"
7/>
8
Examples
Default
The default
IconButton renders with color="neutral" and variant="soft" at size="2".1<IconButton icon={<IconPencil />} aria-label="Edit" />
2
Solid
Use
variant="solid" for icon buttons that need stronger visual presence.1<IconButton icon={<IconPencil />} variant="solid" aria-label="Edit" />
2
Ghost
Use
variant="ghost" for minimal icon buttons that blend into surrounding content until hovered.1<IconButton icon={<IconPencil />} variant="ghost" aria-label="Edit" />
2
Danger
Use
color="danger" for destructive actions like deleting.1<IconButton icon={<IconTrashCan />} color="danger" variant="soft" aria-label="Delete" />
2
Small
Use
size="1" for tight layouts like table rows or inline controls.1<IconButton icon={<IconPencil />} size="1" aria-label="Edit" />
2
Large
Use
size="3" when the button needs more presence, like a primary page action.1<IconButton icon={<IconPencil />} size="3" aria-label="Edit" />
2
Toolbar
Icon buttons work well for compact toolbars. Use the
ghost variant for a clean, minimal row of formatting controls.Disabled
Set
disabled to prevent interaction. The button’s opacity is reduced to signal that it is inactive.1<IconButton icon={<IconPencil />} disabled aria-label="Edit" />
2
API Reference
| Prop | Type | Default |
|---|---|---|
| icon | ReactNode | - |
| color | "neutral" | "danger" | "neutral" |
| variant | "solid" | "soft" | "ghost" | "soft" |
| size | "1" | "2" | "3" | "2" |
| loading | boolean | false |
| disabled | boolean | false |
- Button for actions that need a visible text label
- Button Group for grouping icon buttons into toolbars or split controls