The round sibling of Button, for an action one icon can explain.
FreeWeb and Mobile5 variantsMotion
Preview
npx shadcn add @fetaui/icon-buttonPlayground
Variants
Sizes
Loading and success
Disabled
Variant
Size
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/icon-button
Variants
Five variants, one for each weight of action. Icon Button has no Link variant.
Size
Motion
Sizes
Small for dense rows, Medium by default, Large for touch and hero spots.
Variant
Motion
Accessibility
- A native button, named by the required label.
- Loading sets aria-busy and blocks double submits.
Motion
- Press scales to 0.98 on a firm spring.
- Set animated to false to turn off the press scale.
- With reduced motion, press is a color change only and the spinner turns slowly.
Responsive behavior
- Each size is 8 px larger on Mobile.
Performance
- A thin wrapper over Button, so it adds no state or effects of its own.
- There is no text to split, so the label motion never mounts letters.
- Press scales with a transform, so it never runs layout.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/icon-button after installing it.
- icon and label are required. label is the accessible name, since nothing shows on screen.
- Pass status and onSuccessEnd for async work. Reset status to idle in onSuccessEnd.
- Composes Button with shape pill. It does not accept children, leadingIcon, shortcut or the link variant.
Related
ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.ToggleComponentA button that stays pressed.TooltipComponentA short label that names a control on hover, focus or long press, in Ink, Soft or a rich tab shape.Button GroupComponentRelated actions in one shape: Segmented, Attached or Toolbar. For a main action with a menu, use Split Button.SpinnerComponentSays something is happening when the wait is short or unknown. Four kinds at five sizes.