# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/component/button3. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Components](/components)
3. /
4. [Button](/components/button)
5. /
6. Async Loading Button

# Async Loading Button

An async loading button that shows a spinner and disables itself while a promise resolves.

PreviewCode

Create account

## Installation

Adds the component and everything it depends on to your project.

![](https://oud.pics/sm/l/npm.svg)npm![](https://oud.pics/sm/l/bun.svg)bun![](https://oud.pics/sm/l/pnpm.svg)pnpm![](https://oud.pics/sm/l/yarn.svg)yarn

Base UI

`npx shadcn add https://ui.beste.co/component/r-base/button3`

New here? Read the [installation guide](/docs/installation).

## Usage

The import and the props worth knowing about, in one place.

```
import { Button3 } from "@/components/beste/component/button3";

// Return a promise from onClick and the button handles loading itself:
// spinner + loadingLabel + disabled until the promise settles.
<Button3
  label="Create account"
  loadingLabel="Creating account..."
  tone="primary"   // "dark" (default) | "primary" | "outline"
  type="submit"    // "button" (default) | "submit"
  onClick={async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000));
    console.log("account created");
  }}
/>

// Or drive it yourself with your own state:
// <Button3 label="Save changes" loading={isSaving} />
```

## Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Create account

Usage

```
import { Button3 } from "@/components/beste/component/button3";

<Button3
  label="Create account"
  loadingLabel="Creating account..."
/>
```

Props

LabelLoading label

Disabled

Surface

Tonedark

## Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

| Click         | Runs the handler. If it returns a promise the button stays busy until it settles, so a double click cannot fire it twice. |
| ------------- | ------------------------------------------------------------------------------------------------------------------------- |
| Enter / Space | The same: it is a real button, not a div with a handler.                                                                  |

## Props

Read from the component's own type, so this cannot drift from what it accepts.

| Prop         | Type                                                                     | Default   | Description                                                                                                                        |                                                                  |
| ------------ | ------------------------------------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| label\*      | string                                                                   | —         | Button label                                                                                                                       |                                                                  |
| loading      | boolean                                                                  | —         | Controlled loading state. Leave it undefined and return a promise from onClick instead, the button then manages loading by itself. |                                                                  |
| loadingLabel | string                                                                   | —         | Label shown while loading (defaults to label)                                                                                      |                                                                  |
| icon         | LucideIcon                                                               | —         | Optional leading icon (replaced by the spinner while loading)                                                                      |                                                                  |
| tone         | "dark" \| "primary"                                                      | "outline" | —                                                                                                                                  | Surface tone: solid dark (default), primary, or bordered outline |
| type         | "button" \| "submit"                                                     | —         | HTML button type, use "submit" inside forms                                                                                        |                                                                  |
| disabled     | boolean                                                                  | —         | Disable independently of loading                                                                                                   |                                                                  |
| onClick      | (event: React.MouseEvent<HTMLButtonElement>) => void \| Promise<unknown> | —         | Click handler. Return a promise to drive the built-in loading state                                                                |                                                                  |
| className    | string                                                                   | —         | Additional classes merged onto the button                                                                                          |                                                                  |

[PreviousUnderline Arrow Button](/component/button2)[NextIcon Button](/component/button4)

On this page
* [Preview](#preview)
* [Installation](#installation)
* [Usage](#usage)
* [Playground](#playground)
* [Keyboard](#keyboard)
* [Props](#props)

## More Button components

[View all Button](/components/button)

[](/component/button19)

Decrypt accessDecrypt access

### Scramble Button

A scramble text button that cycles random glyphs on hover for developer and tech landings.

[](/component/button14)

Hold to deleteDeletedHold to deleteDeleted

### Hold to Confirm Button

A hold to confirm button that fills while held and fires only when the hold completes.

[](/component/button13)

Start your projectStart your projectStart your project

### Letter Roll Button

A pill button whose label rolls up letter by letter with a staggered hover animation.

[](/component/button6)

![](https://i.pravatar.cc/64?img=14)![](https://i.pravatar.cc/64?img=33)![](https://i.pravatar.cc/64?img=48)Join 2,400+ members

### Avatar Stack Button

A social proof button with an avatar stack inside the pill and a trailing arrow.

[](/component/button20)

Let's talk

### Magnetic Button

A magnetic button that is pulled toward the cursor on hover and springs back on leave.

[](/component/button11)

Press me

### Pressable Button

A neobrutalist button with a hard offset shadow that lifts on hover and presses in on click.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.