ApprovalGate

stable

Binary approve/deny gate with ceremony-level friction

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

Loading demo…

Props

Prop	Type	Default	Description
`action`req	`string`	—	Description of the action requiring approval
`agent`req	`string`	—	Agent requesting approval
`onApprove`	`(reason?: string) => void`	—	Called on approval
`onReject`	`(reason?: string) => void`	—	Called on rejection
`requireReason`	`boolean`	—	Require typed reason before action

actionrequired

Type stringDefault —

Description of the action requiring approval

agentrequired

Type stringDefault —

Agent requesting approval

onApprove

Type (reason?: string) => voidDefault —

Called on approval

onReject

Type (reason?: string) => voidDefault —

Called on rejection

requireReason

Type booleanDefault —

Require typed reason before action

Metadatasemantic type border surface

MobileTouch Target

Approve/reject actions must be ≥44px with clear spacing between them. On mobile, stack actions vertically. Never place two destructive actions adjacent without a separator.

Design Rationale

This component was designed to express:

View all principles →

Explore Related

CeremonyGate→

Multi-step deliberate confirmation for high-stakes actions

AlertDialog→

Confirmation dialog requiring explicit user action

ApprovalQueue→

Queue of pending human approvals with priority ordering

Was this helpful?