Loading Button for React

Set isLoading and the label rolls up and out while a spinner and loadingText, such as Saving…, roll in; set it back and the label returns. Without loadingText or spinnerPosition, it's the Button's own loading state: a spinner centered over the hidden label. While it loads, presses do nothing and the button keeps its width, so nothing around it jumps.

Use it for any action that waits on a request: saving a form, sending a message, syncing data. When the action should also say it's done, use the Success Button. It wraps the Button, so variant and size work as usual. The two rows share one place and swap with CSS transitions, with no animation library; with reduced motion they only fade.

Installation

Usage

import { LoadingButton } from "@/components/ui/loading-button";

<LoadingButton isLoading={saving} loadingText="Saving…" onClick={save}>
  Save changes
</LoadingButton>

Demos

Spinner Position

spinnerPosition puts the spinner at the start of the label or its end; the end reads well for an action that moves forward, such as Continue. Without loadingText, the children stay beside the spinner. Both sides follow the reading direction, so they flip in a right-to-left page. The last button sets neither, and gets the Button's centered spinner.

Form

As a submit button, it shows the request is on its way and ignores more presses until it ends. That includes Enter in the field: the press it makes is stopped too, so the form isn't sent twice.

Accessibility

The spinner and the loading row are hidden from assistive tech; the label at rest keeps naming the button. When loading starts, a polite status inside the button says loadingText, or Loading without it. The button is marked aria-disabled and stays focusable while it loads, so a keyboard user who pressed it isn't sent back to the top of the page. With the centered spinner, it's the Button's own loading state, which is disabled and aria-busy.

FAQ

API Reference