Button Loading State
Choose button loading for async actions whose feedback belongs exactly where the user acted.
Timing
Show only after roughly 250-300ms to avoid flashing on fast actions; keep width stable throughout.
Easing
Use a quick ease-out opacity or icon swap; the spinner itself should rotate linearly.
Risk
Live Demo
What It Is
A button that transitions into a loading state upon being clicked, usually by replacing text with a spinner or adding a spinner next to the text while disabling further clicks.
Decision Guidance
Choose button loading for async actions whose feedback belongs exactly where the user acted.
Best For
Preventing duplicate submissions while keeping feedback anchored to the control the user clicked.
Avoid When
Avoid for instant local toggles, links, or actions where disabling the button would hide available recovery.
Timing
Show only after roughly 250-300ms to avoid flashing on fast actions; keep width stable throughout.
Easing
Use a quick ease-out opacity or icon swap; the spinner itself should rotate linearly.
Risk Tags
✓When to Use
- Form submissions
- Saving data
- Async actions that take >300ms
✕When NOT to Use
- Instant client-side actions
- Navigation links
Configuration Tips
- 01Disable the button while loading to prevent double submissions
- 02Ensure the button does not resize when the text swaps to a spinner
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a submit button that shows a loading spinner when clicked and disables itself.
Code Example (Tailwind CSS)
export function ButtonLoading() {}