v0.1.0

<PxConfirm />ReactActions & feedbackFree

Two-step delete

Two-step delete button: the first click arms it and a pixel fuse burns down; a second click inside the window confirms with a burst.

View as Markdown

<PxConfirm />· loading

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxConfirm />

Props

childrenlive

timeoutlive

confirmTextlive

doneTextlive

React

<PxConfirm
  doneText="Project deleted"
  timeout={3}
  confirmText="Click again to confirm"
>Delete project</PxConfirm>

Installation

pnpm dlx shadcn@latest add @lumesec/px-confirm

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/px-confirm.json

Usage

px-confirm-example.tsx

import { PxConfirm } from "@/components/lumesec/px-confirm";

export function Example() {
  return (
    <PxConfirm doneText="Project deleted" onConfirm={() => console.log("deleted")}>
      Delete project
    </PxConfirm>
  );
}

Behaviour

The first click arms it and a pixel fuse burns down along the bottom. A second click inside the window confirms with a burst; Escape, blur or the timeout cancel it.

API reference

Props

Also accepts every prop of <span> (React.ComponentProps<"span">), spread onto the root element.

childrenTypestringDefault"Delete project"

Idle label.

timeoutTypenumberDefault3

Seconds the armed state lasts before it cancels.

confirmTextTypestringDefault"Click again to confirm"

Label while armed.

doneTextTypestringDefault"Deleted"

Label shown for 2 s after confirming.

onConfirmType() => void

Called on the second click inside the window.

onCancelType() => void

Called when the armed state ends without confirming: Escape, the button losing focus, or the timeout.

Ref

ref points at the root HTMLSpanElement.

Keyboard

Keys	Action
Enter / Space	Arm, then confirm while armed.
Escape	Cancel while armed.

Accessibility

A native <button>; its accessible name is the visible label.
The label is an aria-live="polite" region, so the confirm prompt and the done text are announced.
Moving focus away while armed cancels.
The fuse is drawn on an aria-hidden canvas; the remaining time is not exposed.
Reduced motion: labels swap without rolling and the confirm burst is skipped; the fuse still burns down.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --destructive, --border, --card, --muted-foreground, --lumesec and --lumesec-shine.

Notes

After confirming, clicks are ignored for 2 s, then the button returns to idle. The root carries data-state="armed" or data-state="done" in those states.
The root is a wrapper span around the button, so the sparks can fly past the button's edges.

<px-button>

Async buttonpx-button

<px-toaster>

Toastspx-toaster

<px-progress>

Progress barpx-progress

<px-ring>

Progress ringpx-ring

Was this page helpful?

Related