Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Button

Loading Secondary Button Spinner for React

A disabled secondary button with a spinner before its Saving Changes label.

Framework
UI library

A loading state for a secondary action, like saving a draft. This secondary button is disabled while the work runs, with a Spinner before the Saving Changes 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

How is this a secondary button?

variant is secondary on the Button. The children are the Spinner and the text Saving Changes. disabled is set, so the button can't be pressed again.

How does the spinner line up with Saving Changes?

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

What color is the spinner here?

The icon uses currentColor, so it takes the secondary button's text color. This file sets no extra color class on the Spinner.

Why does the label say Saving Changes?

That string is the button's text in this file. It tells people which action is running. Swap it for another short status and leave the Spinner and variant as they are.

What does a screen reader announce?

The button's name is Saving Changes, with its disabled state. The Spinner has aria-hidden="true", so it adds nothing to that name.

How do I stop the spin for reduced motion?

Add motion-reduce:animate-none on the Spinner. The secondary button stays disabled with "Saving Changes", and the icon stops.

All 17 spinner examples