Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Button

Loading Icon Button Spinner for React

A disabled icon-only button that shows just a spinner while it loads.

Framework
UI library

An icon-only button can show it's busy too. This square button is disabled and holds only a Spinner, for toolbar actions like refresh or sync where there's no room for a 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 a square?

size is icon-md on the Button, which is the icon-only size. The only child is a Spinner at the default size-4, so the wheel sits in the square with the button's padding around it.

Why is the icon button disabled?

So it can't be pressed again while it shows the spinner. disabled is set, and the square keeps its size at reduced opacity.

What name does the button have if there is no text?

aria-label is Loading on the Button, the name assistive tech reads. The Spinner has aria-hidden="true", so its own Loading status isn't announced twice.

Does this spinner need data-icon?

This file leaves data-icon off, because the spinner is the only child and there is no label to space it against. On a button that also has text, set data-icon to inline-start.

What color is the spinner in the square?

The icon uses currentColor, so it takes the button's text color. Add text-primary or text-muted-foreground on the Spinner when it should differ from the button.

How do I stop the spin for reduced motion?

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

All 17 spinner examples