Skip to content
Beautiful UI

ActionsLumen Halo

Async ButtonFreev1.0.0

Give it the work and it shows the rest: onClick's promise drives the button through working, done and failed, then it's ready again. No loading flags in your component, and a second press while it runs does nothing.

Built on shadcn/ui

.md
Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-async-button.json
Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-async-button.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Set up the Beautiful UI registry

Free pieces install from their URL with no setup (that URL gives the Base UI build; Radix projects use /r/radix-nova/<name>.json, or add the registries below and the CLI picks your build). Pro pieces need the registries below and BEAUTIFUL_UI_TOKEN in .env.local.

components.json
{
  "registries": {
    "@beautiful-ui": "https://beautiful-ui.dev/r/{style}/{name}.json",
    "@beautiful-ui-pro": {
      "url": "https://beautiful-ui.dev/r/pro/{style}/{name}.json",
      "headers": { "Authorization": "Bearer ${BEAUTIFUL_UI_TOKEN}" }
    }
  }
}

MCP server

claude mcp add --transport http beautiful-ui https://beautiful-ui.dev/api/mcp
Catalog for agents: /llms.txt
Make it fail

Usage

Import it and pass your content. The props that matter most are listed next.

Example
import { AsyncButton } from "@/components/ui/lumen/controls/async-button";

<AsyncButton onClick={() => saveSettings(form)} doneLabel="Saved">Save settings</AsyncButton>

Props

  • motion"full"

    "full" | "subtle" | "off"

    As on Button: subtle is shorter on a calm curve; off is instant. Reduced motion is respected automatically.

  • onClick–

    (event) => unknown

    The work. Return a promise; a rejection or throw shows the error state.

  • children–

    ReactNode

    The label.

  • doneLabel / errorLabelthe label / "Try again"

    ReactNode

    After success or failure.

  • resetMs2000

    number

    How long the result shows.

  • onError–

    (error) => void

    Receives the failure, for logging or a toast.

Show all 7 props

  • variant / size / icon–

    Button props

    As on Button.

Source

components/ui/lumen/controls/async-button.tsx

87 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

More in Actions