Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Outline

Loading Button (Outline) for React

An outline button, disabled, with a spinner and the word Loading, while a secondary action is still running its request.

Framework
UI library

The outline button is disabled and shows a spinner before Loading. Leave it that way until the request finishes, then put the original label back.

Use it for a secondary refresh or a filter that takes a moment. If the wait belongs to the whole page, put a Spinner next to the content. In React, Base UI will not end the loading state for you.

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

Does this demo use isLoading?

No. It passes disabled, renders a Spinner with data-icon="inline-start", and keeps the word Loading. variant="outline" keeps the border and the background. The spinner and the word Loading sit inside it.

When would I use isLoading instead?

isLoading hides the label visually, centers a spinner, keeps the button's width, sets aria-busy, and disables the button. Use this demo's pattern when the word should stay visible beside the spinner.

Why is the button disabled?

So a second click can't start the request again. You set disabled yourself here. isLoading does that for you. This demo doesn't.

Can the label say something other than Loading?

Yes. The children after the spinner are ordinary text. Saving, or Deleting 3 items, is fine. The demo says Loading so the state is obvious.

Will the spinner be announced as well as the word?

The spinner's default accessible name is Loading, and it has role="status". The button already says Loading, so pass aria-hidden on the spinner if once is enough. The demo doesn't.

Does the outline stay while it loads?

variant="outline" keeps the border and the background. The spinner and the word Loading sit inside it. The spinner uses the button's text color. It doesn't pick a variant of its own.

All 35 button examples