Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Button

Loading Button Spinner for React

A disabled button with a spinner before its Loading... label.

Framework
UI library

A button that shows its click was taken. While the work runs it's disabled, so it can't be pressed twice, and a Spinner sits before the Loading... label.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Why is the button disabled?

disabled is set on the Button, so it can't be pressed again while its label reads Loading... It draws at reduced opacity.

How does the spinner line up with Loading...?

The Spinner is the first child, with data-icon set to inline-start. That uses the button's own icon spacing, so the wheel sits in front of the label.

Can the label say what is happening?

Yes. This file uses the text "Loading...". Swap that string for "Saving..." or "Sending..." and leave the Spinner where it is.

Which button variant is this?

None is set, so it is the default filled button at the default size. Pass variant or size on the same Button to change the look. Keep it disabled, with the Spinner.

What does a screen reader announce?

The button's name is its label, Loading..., with its disabled state. The Spinner has aria-hidden="true", so its own Loading status isn't read twice.

How do I stop the spin for reduced motion?

Add motion-reduce:animate-none on the Spinner. The button stays disabled with its "Loading..." label, and the icon stops.

All 17 spinner examples