Use when
- Toolbars and top bars where text buttons crowd
- Row actions too narrow for a label
- Toggle actions that show a pressed state
IconButton
Runs an action from an icon alone, for toolbars and table rows.
Toolbar action
Icon carries the action; the label lives in aria-label.
Loading preview…
Installation
Cloud Registry requires a workspace key and installs verified source with a lockfile. In Fragments Cloud, open Settings, then Repositories, then Open MCP setup beside Workspace key. Store the full key in a password manager or CI secret and never commit it.
npm install -D @usefragments/cli
npx @usefragments/cli registry add IconButton --to src/fragments/ui --import-path "@/fragments/ui"
npx @usefragments/cli registry statusIf status reports drift, inspect it with registry diff and restore managed source with registry sync.
Usage
import { IconButton } from "@/fragments/ui";Variants
Rising chrome: transparent, tinted, then bordered.
Loading preview…
Sizes
sm for table rows, lg for primary chrome.
Loading preview…
Pressed state
Toggle that stays on, reported through aria-pressed.
Loading preview…
Disabled
Unavailable action, out of the tab order.
Loading preview…
Usage guidance
Avoid when
- The action needs a visible label — use Button
- It flips a persistent setting — use Switch
- The icon is decorative — use Icon
Standards references
Related components
API Reference
IconButton
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 |
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 |
type | enumsubmitresetbutton | button | — |