Buttonsibling
Use Button when the action should have a visible text label or broader layout variantsIconButton
Compact square button for icon-only actions in dense toolbars, top bars, and row controls.
Setup
import { IconButton } from '@usefragments/ui';Examples
Toolbar action
A named icon-only toolbar action
Loading preview...
Pressed state
A toggle-style action with its state exposed
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Icon element rendered inside the button |
variant | enumghostsubtleoutlined | ghost | Visual treatment for the icon-only action |
size | enumsmmdlg | "md" | Control size aligned with adjacent fields and toolbar actions |
pressed | boolean | Not set | Marks a toggle-style action as pressed and sets aria-pressed |
type | enumsubmitresetbutton | button | — |
aria-label | string | Not set | Accessible action name when no labelled-by relationship is available |
aria-labelledby | string | Not set | ID reference for an external accessible action label |
Usage Guidelines
When to use
- Compact icon-only actions in toolbars or top bars
- Row actions where a text button would be too wide
- Toggle-style icon actions with a visible pressed state
When not to use
- The action needs a visible text label (use Button)
- The control changes a persistent boolean setting (use Switch)
- The icon is decorative and not interactive (use Icon)
Best practices
- Always provide aria-label or aria-labelledby
- Use ghost for ordinary toolbar actions and outlined when more separation is needed
- Use pressed only when the button represents a persistent toggle state
Accessibility
- Every icon-only button must have an accessible name
- The accessible name should describe the action, not the icon
- Pressed state must be exposed with aria-pressed