Skip to content

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

Free

Loading Button (Link) for Ark UI

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

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, Ark 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

Anatomy

Button anatomy: root, icon, text

Usage

<Button disabled variant="link">
  <Spinner data-icon="inline-start" />
  Loading
</Button>

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 asChild and put an a or your router's link inside. The button's styles move onto the link.

API Reference

Button

Sets disabled and variant="link". The rest is on the Button page.

Spinner

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

All 35 button examples