Small component. Thoughtful feedback.

Good buttons
follow through.

A standard button registers a click. AIconButton follows the promise: a spin while it works, a green glow when it succeeds, and a clear way back when it fails.

Explore Storybook Get started

React 18 / 19 MUI 6 TypeScript ready

A little interaction, live Try it

Feel the follow-through.

Choose a path. Give the button a click.

Real component. Simulated save. No backend.

01 / CLARITY

Make the wait visible.

People shouldn’t have to wonder whether their click worked. Pending icons and success or error colors give the action a visible rhythm.

02 / LESS PLUMBING

Let the promise do the talking.

Await your action in one callback. The component handles its feedback and ignores extra clicks on that button while the request runs.

03 / A FAMILIAR FIT

Keep the MUI you know.

Your theme, your icons, your button props. Add async feedback without inventing another button system or another styling language.

Small addition. Better feeling.

A promise is all it takes.

Import the stylesheet, pass an async action, and give it a good name. Resolve for success; throw for a dismissible error.

Read the full usage guide

npm install @relativity/mui-action-buttons

import { AIconButton } from '@relativity/mui-action-buttons';
import '@relativity/mui-action-buttons/styles.css';

<AIconButton onClick={async () => { await saveChanges(); }}>
  Save my masterpiece
</AIconButton>