Confirm morph

A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

npx shadcn@latest add @silicon-ui/confirm-morph
actionsnew
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/confirm-morph

Manually

  1. Install the dependencies.

    npm install lucide-react motion
  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/confirm-morph/confirm-morph.tsx
    • components/silicon-ui/confirm-morph/confirm-morph.module.css
  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { ConfirmMorph } from "@/components/silicon-ui/confirm-morph/confirm-morph";

API reference

PropTypeDefault
label*

The resting label, such as "Delete project".

ReactNode—
icon

A plain icon before the resting label.

ReactNode—
prompt

The question shown while confirming, such as "Delete 3 files?". Defaults to the label with a question mark.

ReactNode—
confirmLabelstring"Delete"
cancelLabelstring"Cancel"
pendingLabel

Shown beside the spinner while `onConfirm` resolves.

string"Deleting"
doneLabelstring"Deleted"
errorLabelstring"Couldn’t finish"
retryLabelstring"Retry"
undoLabelstring"Undo"
undoingLabel

Shown beside the spinner while `onUndo` resolves.

string"Restoring"
tone

`danger` (default) gives the confirm button the danger colour, for actions that destroy something. `neutral` gives it the accent, for important actions that can be reversed. The resting button is neutral either way.

"danger" | "neutral""danger"
confirmMode

`press` confirms on a press. `hold` asks for a press held for `holdDuration`. `countdown` confirms, then counts down `countdown` seconds that Cancel or Escape can still stop.

ConfirmMorphMode

"press""hold""countdown"

"press"
holdDuration

Milliseconds the confirm button must be held in `hold` mode.

number1000
countdown

Seconds counted down before the action runs in `countdown` mode.

number3
countdownLabel

Text before the seconds in `countdown` mode, such as "Deleting in". Defaults to the pending label followed by "in".

string—
onConfirm

Runs on confirm. Return a promise to show the pending face; a rejection shows the error face with Retry.

() => void | Promise<unknown>—
onUndo

Offering it adds Undo to the result. Return a promise to show a pending face while it runs.

() => void | Promise<unknown>—
onCancel() => void—
state

Controlled state. Pair it with `onStateChange`.

ConfirmMorphState

"done""error""idle""confirming""pending"

—
defaultState

Starting state when uncontrolled.

ConfirmMorphState

"done""error""idle""confirming""pending"

"idle"
onStateChange(state: ConfirmMorphState) => void—
confirmTimeout

Milliseconds before an unanswered question returns to rest. Resting the pointer on the control pauses it. 0 turns it off.

number6000
resultTimeout

Milliseconds a result stays before returning to rest. Resting the pointer on the control pauses it. 0 turns it off.

number5000
cancelOnOutsidePress

A press outside the control cancels an open question. Defaults to true.

booleantrue
disabledbooleanfalse
classNamestring—
ref

Receives the root element, which also takes focus while the action is pending.

Ref<HTMLDivElement>—

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens