Icon Action Button React component
A compact icon-only button for toolbars and table rows: solid, soft, outline or ghost, square or round, four sizes, a tooltip that names the action, a count badge, a loading spinner and a danger tone for destructive actions.
When to use the Icon Action Button component
Use Icon Action Button for frequent actions where space is tight: table rows, card corners, toolbars, headers. The tooltip names the action so the icon doesn't have to explain itself.
For the main action on a screen, use a Button with text. For an on/off state, use Toggle Button.
Installation
Add the Icon Action Button component to your project with the shadcn CLI. It lands in components/icon-action-button.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/icon-action-buttonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<IconActionButton /> accepts 12 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| icon* The icon. Keep it a single glyph; the button is sized around it. | React.ReactNode | — |
| label* Accessible name, also shown as the tooltip. Required: there's no visible text. | string | — |
| variant | "solid" | "soft" | "outline" | "ghost" | "soft" |
| size | "xs" | "sm" | "md" | "lg" | "md" |
| shape | "square" | "circle" | "square" |
| tone "danger" tints the button for destructive actions like delete. | "neutral" | "danger" | "neutral" |
| badge A count (or true for a plain dot) pinned to the top-right corner. | number | boolean | — |
| loading | boolean | false |
| tooltip Show the label as a tooltip on hover and keyboard focus. | boolean | true |
| tooltipSide | "top" | "bottom" | "top" |
| theme | "dark" | "light" | "dark" |
| ref React 19 passes ref as a regular prop. | React.Ref<HTMLButtonElement> | — |
- icon*
The icon. Keep it a single glyph; the button is sized around it.
React.ReactNode - label*
Accessible name, also shown as the tooltip. Required: there's no visible text.
string - variant"solid" | "soft" | "outline" | "ghost"Default: "soft"
- size"xs" | "sm" | "md" | "lg"Default: "md"
- shape"square" | "circle"Default: "square"
- tone
"danger" tints the button for destructive actions like delete.
"neutral" | "danger"Default: "neutral" - badge
A count (or true for a plain dot) pinned to the top-right corner.
number | boolean - loadingbooleanDefault: false
- tooltip
Show the label as a tooltip on hover and keyboard focus.
booleanDefault: true - tooltipSide"top" | "bottom"Default: "top"
- theme"dark" | "light"Default: "dark"
- ref
React 19 passes ref as a regular prop.
React.Ref<HTMLButtonElement>
FAQ
- Is it accessible without text?
- label becomes the aria-label and the tooltip, and the tooltip is linked with aria-describedby. Keyboard focus shows it immediately.
- How do I mark a destructive action?
- Set tone="danger". Every variant keeps its shape and takes the red instead of the neutral colour.
- Can it show a count?
- Pass badge a number (99+ caps it) or true for a plain dot, like unread notifications.
