Skip to content

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

Free

Loading Button Spinner for Ark UI

A disabled button with a spinner in front of the label Loading.... The file does not send a request.

A filled button is disabled. A spinner sits before the label Loading.... The spinner is hidden from assistive tech, so the button name is the label. No request runs.

Use it after a click so the action cannot be pressed twice. Change the label to Saving... or Sending... when that is the action. A percent on the work fits Progress. In React, Ark UI does not disable the button for you. This file does.

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>
  <Spinner aria-hidden="true" data-icon="inline-start" />
  Loading...
</Button>

FAQ

Why is the button disabled?

disabled is set on the Button, so it can't be pressed again while its label reads Loading... It draws at reduced opacity.

How does the spinner line up with Loading...?

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

Can the label say what is happening?

Yes. This file uses the text "Loading...". Swap that string for "Saving..." or "Sending..." and leave the Spinner where it is.

Which button variant is this?

None is set, so it is the default filled button at the default size. Pass variant or size on the same Button to change the look. Keep it disabled, with the Spinner.

What does a screen reader announce?

The button's name is its label, Loading..., with its disabled state. The Spinner has aria-hidden="true", so its own Loading status isn't read twice.

How do I stop the spin for reduced motion?

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

API Reference

Button

Sets disabled. 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