# Motion Async Button

Save settings button that shows Saving…, then Settings saved or Retry save, without changing width.

- id: `motion-async-button`
- Page: https://agentic-ui-kit.com/components/motion-async-button
- Live preview: https://agentic-ui-kit.com/live/component/motion-async-button

## Install

```bash
agentic-ui add motion-async-button
npx shadcn@4.17.0 add @agentic-ui/motion-async-button
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** async-action-states, constant-width-labels, morph-to-circle, error-shake, standalone-success-checkmark, polite-result-announcement, reduced-motion-fallback, informative-state-preservation
- **Intents:** execute-flow, configure, track-status
- **Suits domains:** saas, finance, ecommerce, ai-workspace, devtools, operations
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** Save settings button that shows Saving…, then Settings saved or Retry save, without changing width, Publish changes in a compact toolbar, morphing to a circle while the request runs, Standalone success checkmark next to an Invoice sent confirmation
- **Avoid when:** Waits that belong to a region and report no action result, such as refreshing a table (use motion-spinner-set), Destructive actions that need an explicit confirmation step (use a hold or confirm pattern first), Long jobs with measurable progress (use a determinate progress bar)
- **Preserve when adapting:** constant-width-label-grid, aria-busy-and-polite-result, focus-stays-on-button, static-fallback-with-label-change
- **Replace when adapting:** action-labels, announcements, idle-icon
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9.5/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion