Button · Pixel HD component · LumeSec Elements

<hf-button>· loading

Generate

Delete

Tryclick both: one succeeds, one fails.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-button>

Props

variantremounts

loading-textremounts

success-textremounts

error-textremounts

typeremounts

demoremounts

<HfButton
  loadingText="Working…"
  successText="Generated"
  errorText="Try again"
  demo="ok"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-button

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-button.json

Usage

import { HfButton } from "@/components/lumesec/hf-button";

export function Example() {
  return (
    <>
      <HfButton demo="ok" successText="Generated">Generate</HfButton>
      <HfButton variant="danger" demo="error">Delete</HfButton>
    </>
  );
}

Behaviour

Noise-lit surface, pointer light, ripples on press, a flowing loading field and a sweep on success. run(fn) takes a promise and handles all three states.

API reference

Attributes

variantReact propvariantTypedanger

Set to danger for the red colour scheme. Without it the accent colour is used. Read directly by CSS and the canvas, so changes apply on the next frame.

loading-textReact proploadingTextTypestringDefaultWorking…

Label shown while the promise passed to run() is pending.

success-textReact propsuccessTextTypestringDefaultDone

Label shown for 1.7 s after the promise resolves.

error-textReact properrorTextTypestringDefaultTry again

Label shown for 1.7 s after the promise rejects.

typeReact proptypeTypestring

Set to submit to call requestSubmit() on the owning form when clicked. Ignored when demo is set.

demoReact propdemoTypestring

Makes a click run a simulated 1.5 s task. error makes it fail; any other non-empty value makes it succeed.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

startReact proponStartDetail{}

Fires when run() enters the loading state.

successReact proponSuccessDetail{}

Fires when the promise passed to run() resolves.

errorReact proponErrorDetail{}

Fires when the promise passed to run() rejects.

Methods

Call them on the element, for example through a React ref.

run(fn: () => Promise<unknown>): Promise<unknown>

Shows the loading state while the promise runs, then success or error for 1.7 s before returning to the label. Resolves with the promise value and rethrows its error.

Accessibility

Renders a native <button type="button"> in the shadow root, so Enter and Space activate it.
The label sits in an aria-live="polite" region, so the loading, success and error text is announced.
Sets aria-busy on the inner button: true while loading, false otherwise.
Clicks during loading are stopped at the inner button and do not reach the host.
Form-associated but submits no value of its own. With type="submit" a click calls requestSubmit() on the owning form.
Reduced motion: the noise and loading fields are static, the label swaps without rolling, the error shake is skipped and the canvas redraws only on pointer movement or press.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --destructive, --foreground and --lumesec.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-danger and --ui-fg.

Notes

The label is the element's text content, read once on first connect (default Generate). Later text changes are not picked up.

<hf-switch>

Switchhf-switch

<hf-segmented>

Segmented controlhf-segmented

<hf-input>

Text fieldhf-input

<hf-composer>

Prompt composerhf-composer

Related