Button Async 4 - Async with icon

Pro

Async button with a leading icon that swaps to spinner then success.
Shadcn Button Async 4 component

Component data

ID
button/button-async-4
Access
pro
Created
May 23, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Button Async 4 component design & features

A send button with a leading icon. Click triggers the async lifecycle: icon + label fade out, spinner appears, then a success check pops in.

Works well for messaging UIs, comment forms, and inline actions where the icon provides context at rest.