Status Button

A button that transitions through idle, loading, success, and failure states with optional controlled behavior.

@lucide/sveltemotion-svruned

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/status-button.json

usage.svelte

Works from an async click handler, or follows a status you control from form state
Keeps focus while busy, so keyboard focus is not lost when the action finishes
Announces loading and success to screen readers
Swaps states without motion when reduced motion is preferred

Async button with loading, success, and failure transitions.

Name	Type	Default	Description
`children`	`Snippet`	`''`	`The default label content shown while the button is idle.`
`onclick`	`(event: MouseEvent) => void \| Promise<void>`	`undefined`	`Async action that runs on click and automatically flips the button into the loading state.`
`status`	`ButtonStatus`	`undefined`	`Controlled state override for external status management.`
`onStatusChange`	`(status: ButtonStatus) => void`	`undefined`	`Called whenever the button changes between idle, loading, success, and failed states.`
`onError`	`(error: unknown) => void`	`undefined`	`Called when the action rejects during an async click.`
`loadingLabel`	`Snippet`	`undefined`	`Custom content shown while the button is in the loading state.`
`successLabel`	`Snippet`	`undefined`	`Custom content shown while the button is in the success state.`
`successDuration`	`number`	`1500`	`How long the success state remains visible before returning to idle.`
`failedLabel`	`Snippet`	`undefined`	`Custom content shown while the button is in the failed state.`
`failedDuration`	`number`	`2500`	`How long the failed state remains visible before returning to idle.`
`class`	`string`	`''`	`Additional classes applied to the underlying button.`
`variant`	`ButtonVariant`	`undefined`	`Style variant passed through to the underlying button.`