Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Button

Loading Outline Button Spinner for React

A disabled outline button with a spinner before its Processing label.

Framework
UI library

A loading state for a less prominent action. This outline button is disabled while the work runs, with a Spinner before the Processing 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 an outline button?

variant is outline on the Button. The spinner and the label Processing are the children. disabled is set, so the button can't be pressed again.

How does the spinner sit in front of Processing?

The Spinner is the first child, with data-icon set to inline-start. The button's icon spacing then puts the wheel before the word.

What color is the spinner on an outline button?

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

Can the label name the action?

Yes. This file uses "Processing". Replace that string with "Saving" or "Sending" and keep variant, the disabled state and the Spinner.

What does a screen reader announce?

The button's name is the visible word Processing, 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 outline button stays disabled with the word Processing, and the icon stops.

All 17 spinner examples