Safe ActionProv1.0.0
A risky action that asks in place: the button widens into Cancel and a confirm you hold until its cells fill, shows its pending state in the same spot, then offers Undo while a hairline drains. No dialog and no layout jump, and focus always lands on the step you're on.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-safe-actionNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Fail the first try
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { SafeAction } from "@/components/ui/lumen/controls/safe-action";
<SafeAction icon="trash" onConfirm={() => deleteProject(id)} onUndo={() => restoreProject(id)} labels={{ done: "Project deleted" }}>
Delete project
</SafeAction>Props
children–ReactNodeThe action's name on the first button, such as "Delete project".
onConfirm–() => unknownRuns once confirmed. Return a promise to show the pending state until it settles; a rejection shows the error step with Try again.
onUndo–() => unknownReverses the action (a promise works too). Without it there's no Undo step.
mode"hold""hold" | "press"hold: hold the confirm until its cells fill (Space or Enter held works too). press: one press confirms.
holdMs / undoMs / armedMs1000 / 5000 / 6000numberHow long the hold takes, how long Undo stays, and how long an untouched confirm step waits before stepping back.
tone"danger""danger" | "accent"The confirm drawn as destructive, or as the primary.
Show all 10 propsShow fewer
variant / size / icon"secondary" / "default"Button propsThe first button's look, size and icon (a Lumen icon name such as "trash", or your own).
prompt–stringA short question in the confirm step, such as "Archive this project?".
labels–Partial<SafeActionLabels>Every word it shows: confirm, holdHint, holding, cancel, pending, done, undo, undoing, undone, error, undoError, retry, dismiss.
motion"full""full" | "subtle" | "off"full: the width springs and each step fades in from a soft blur. subtle: shorter, on a calm curve. off (and reduced motion): no width travel or blur.
Source
components/ui/lumen/controls/safe-action.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
