Icon Button
A square, icon-only button. aria-label is required at the type level. Shares Button's sizes, appearances, decorative tones and press ripple, but defaults to the ghost appearance.
Appearances
contained, bordered, dashed, and ghost - the default, since an icon-only control usually sits beside the thing it acts on.
Sizes
Decorative tones
Shares Button's five decorative tones (ComponentTone) - a purely visual choice, not a status signal.
Press ripple
The same pointer-origin ripple as Button, clipped to the control's corners. ripple={false} turns it off on one control.
- Pointer presses only, and skipped under prefers-reduced-motion: reduce
Disabled and loading
- Every icon button requires aria-label; disabled shows a not-allowed cursor
API reference
Required - icon-only controls must still have an accessible name.
The icon. Required - there is nothing else to render.
Visual treatment. Defaults to `"ghost"`, unlike `Button` - an icon-only control is usually secondary to the thing it sits beside.
Swaps the icon for a spinner and disables interaction.
Plays a pointer-origin ripple on press. On by default, matching Button; pass `false` to suppress it. Does nothing under `prefers-reduced-motion: reduce`.
Control size - the square is sized to match `Button` at the same value.
Decorative color.
Also accepts everything from React.ButtonHTMLAttributes<HTMLButtonElement>.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent