Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Loading Small Button Spinner for React

A small disabled button with a 12px spinner in front of Please Wait. No request is running.

A small button is disabled. A 12px spinner sits before the words Please Wait. The spinner is hidden from assistive tech. No request runs.

Use the small size in a table row or a toolbar. The wheel is 12px so it matches the shorter button. A full-width wait can use the default button, and a known fraction fits Progress. In React, Base UI does not pick the small size.

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

Anatomy

Spinner anatomy: item, spinner, title

Usage

<Button disabled size="sm">
  <Spinner aria-hidden="true" className="size-3" data-icon="inline-start" />
  Please Wait
</Button>

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.

API Reference

Button

Sets disabled and size="sm". The rest is on the Button page.

Spinner

Sets aria-hidden and data-icon="inline-start". The rest is on the Spinner page.

All 17 spinner examples