Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Link

Loading Button (Link) for React

A link-styled button that is disabled and shows a spinner, while a quiet action is still waiting on its own request.

Framework
UI library

The link variant, disabled, with a spinner and the word Loading. People can see the click already happened, and they cannot press it again.

Use it for Load more or Refresh while the request is in flight. Put the old label back when it finishes, and say what failed if it fails. A Spinner alone does not say which action is waiting. In React, Base UI does not know when your request ends.

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. The link variant is disabled, with a Spinner (data-icon="inline-start") and the word Loading. variant="link" stays primary text with no fill.

How is isLoading different?

isLoading replaces the label with a centered spinner, holds the width, sets aria-busy, and disables the button. This demo keeps the word next to the spinner, which is the better fit when the action should stay readable.

Why disable a link Button?

So it can't be pressed again while the request runs. The fade is the same disabled treatment as the other variants. An underline doesn't change that.

Can I keep my own label?

Yes. Replace Loading with the action, such as Saving. The spinner is a sibling, not a replacement, in this demo.

Does the spinner add a second Loading announcement?

It can. Spinner defaults to aria-label="Loading" and role="status", and the button text is also Loading. Pass aria-hidden on the spinner when the word is enough. This demo leaves the default.

Can a loading link still navigate?

Not while it's disabled. When you do want a URL, turn it into a link only in the idle state. Pass your link with render, such as render={<a href="/pricing" />}.

All 35 button examples