CeremonyGate

stable

Multi-step deliberate confirmation for high-stakes actions

import { CeremonyGate } from "@nodus/design-system"

Loading demo…

Props

Prop	Type	Default	Description
`action`req	`string`	—	Action being confirmed
`weight`	`"light" \| "medium" \| "heavy"`	"medium"	Ceremony friction level
`steps`req	`CeremonyStep[]`	—	Ordered confirmation steps
`undoable`	`boolean`	—	Show undo period after completion
`onComplete`req	`() => void`	—	Called when all steps completed
`onCancel`	`() => void`	—	Called on cancel

actionrequired

Type stringDefault —

Action being confirmed

weight

Type "light" | "medium" | "heavy"Default "medium"

Ceremony friction level

stepsrequired

Type CeremonyStep[]Default —

Ordered confirmation steps

undoable

Type booleanDefault —

Show undo period after completion

onCompleterequired

Type () => voidDefault —

Called when all steps completed

onCancel

Type () => voidDefault —

Called on cancel

Metadatasemantic type border surface motion

MobileTouch Target

Multi-step ceremony flows must have large, clearly spaced CTAs on mobile. Each step should be full-width. Confirmation inputs (PIN, signature) need ≥16px font.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

ApprovalGate→

Binary approve/deny gate with ceremony-level friction

ConsentFlow→

Multi-step consent wizard with step indicator

Was this helpful?