Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Button

Loading Small Button Spinner for React

A small disabled button with a smaller spinner before its Please Wait label.

Framework
UI library

A loading state for tight spots such as table rows and toolbars. This sm button is disabled while the work runs, with a 12px Spinner before the Please Wait 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 button small?

size is sm on the Button. The Spinner also has size-3 (12px), so the wheel matches the shorter button. The default spinner is size-4.

How does the spinner sit in front of Please Wait?

The Spinner is the first child, with data-icon set to inline-start and className set to size-3. The button spaces that icon before the words.

Why is the small button disabled?

So it can't be pressed again while the label is Please Wait. disabled is set, and the button keeps its sm size at reduced opacity.

Can the label be shorter?

Yes. This file uses "Please Wait". A shorter string such as "Wait" or "Saving" still sits after the size-3 spinner. Keep size="sm" and data-icon.

What does a screen reader announce?

The button's name is Please Wait, 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 beside size-3 on the Spinner. The small button stays disabled, and the icon stops.

All 17 spinner examples