Approvals | incld docs

Requester and reviewer surfaces

<ApprovalRequestTrigger
 resourceType="release"
 resourceId={release.id}
 action="publish"
 title={`Publish ${release.name}`}
 metadata={{ environment: "production" }}
/>

<ApprovalInbox
 view="assigned"
 filters={{ status: "pending" }}
 onSelect={approval => setSelected(approval.id)}
/>

{selected && (
 <ApprovalDetails
  approvalId={selected}
  showActions
  showTimeline
 />
)}

Component reference

Component	Required props	Optional props and behavior
ApprovalRequestTrigger	resourceType, resourceId, action	policy?, title?, description?, metadata?, expiresAt?, onCreated?, children, and native button props except action/onError. Opens ApprovalRequestDialog.
ApprovalRequestDialog	open, onOpenChange, resourceType, resourceId, action	All request input fields plus onCreated? and className?. The note textarea is the request description.
ApprovalInbox	—	view=assigned, filters?, pageSize=25, renderItem?, onSelect?, className?, and AsyncViewProps.
ApprovalActions	approvalId	visible defaults to approve/reject; onResolved?, className?. Reject, cancel, and revoke require a non-empty reason in the rendered form; approve note is optional.
ApprovalTimeline	approval	Chronologically merges lifecycle events and decision records.
ApprovalDetails	approvalId	showActions=true, showTimeline=true, onResolved?, className?, loading?, error?.
ApprovalGate	resourceType, resourceId, action, children	fallback, pending, refreshOnFocus=true. Presentation only.
ApprovalPolicyList	—	onSelect?(id), selectedId?, className?. Uses built-in loading, error, and empty states.
ApprovalPolicyEditor	—	policy? selects edit mode; onSaved?(policy), onDeleted?(policy), className?. Without policy it creates.

Approval request props

Prop	Type	Meaning
resourceType	string	Stable category such as invoice, release, export, or access_request.
resourceId	string	Your application resource identifier.
action	string	Protected verb such as publish, refund, or export.
policy	string?	Explicit approval policy ID; omit to use matching/default policy.
title	string?	Reviewer-facing headline.
description	string?	Reviewer context; editable in the request dialog note.
metadata	Record<string, unknown>?	Structured application context, not an authorization channel.
expiresAt	ISO-8601 string?	Optional request expiry.
requesterId	string?	Direct server SDK only. Browser proxy overwrites it with context.user.id.

Do not pass requesterId from React

The TypeScript input includes requesterId because the same model is usable by the server client. The browser proxy recursively removes it and injects context.user.id. The same rule applies to approver and actor identity on lifecycle commands.

ApprovalGate

<ApprovalGate
 resourceType="release"
 resourceId={release.id}
 action="publish"
 pending={<PublishSkeleton />}
 fallback={<ApprovalRequired />}
>
 <PublishControls />
</ApprovalGate>

Always enforce again on the server

ApprovalGate refreshes on the provider interval and on window focus by default so reviewer decisions appear promptly. It improves UX, but only a server-side approvals.check can authorize the protected mutation.

Hooks

useApprovals(params?: ListApprovalsParams)

Lists assigned, requested, or explicitly authorized all-view approvals.

Returns AsyncState<Page<Approval>>

useApproval(id?: string)

Loads one approval including policy snapshot, decisions, and events.

Returns AsyncState<Approval | undefined>

useApprovalCheck(input?, refreshOnFocus=true)

Checks approved/status/approvalId and optionally refreshes whenever the browser regains focus.

Returns AsyncState<ApprovalCheck | undefined>

useApprovalMutation()

create(input), update(id, input), and lifecycle methods (id, reason?). Each creates a random idempotency key, reports normalized errors, and refreshes provider consumers.

Returns {pending, error, create, update, approve, reject, cancel, revoke}

useApprovalPolicies() / useApprovalPolicy(id)

Read policy definitions.

Returns AsyncState<Page<ApprovalPolicy>> / AsyncState<ApprovalPolicy>

useApprovalPolicyMutation()

create(input), update(id, partialInput), remove(id). Manage policy definitions; restrict these proxy operations in authorize().

Returns {pending, error, create, update, remove}

Generated TypeScript signatures

Interface	Prop	Type	Required
ApprovalActionsProps	approvalId	string	Yes
ApprovalActionsProps	visible	Array<'approve' \| 'reject' \| 'cancel' \| 'revoke'>	No
ApprovalActionsProps	onResolved	(approval: Approval) => void	No
ApprovalActionsProps	className	string	No
ApprovalDetailsProps extends AsyncViewProps	approvalId	string	Yes
ApprovalDetailsProps extends AsyncViewProps	showActions	boolean	No
ApprovalDetailsProps extends AsyncViewProps	showTimeline	boolean	No
ApprovalDetailsProps extends AsyncViewProps	onResolved	(approval: Approval) => void	No
ApprovalDetailsProps extends AsyncViewProps	className	string	No
ApprovalGateProps extends ApprovalCheckInput	children	ReactNode	Yes
ApprovalGateProps extends ApprovalCheckInput	fallback	ReactNode	No
ApprovalGateProps extends ApprovalCheckInput	pending	ReactNode	No
ApprovalGateProps extends ApprovalCheckInput	refreshOnFocus	boolean	No
ApprovalInboxProps extends AsyncViewProps	view	'assigned' \| 'requested' \| 'all'	No
ApprovalInboxProps extends AsyncViewProps	filters	ListApprovalsParams	No
ApprovalInboxProps extends AsyncViewProps	pageSize	number	No
ApprovalInboxProps extends AsyncViewProps	renderItem	(approval: Approval) => ReactNode	No
ApprovalInboxProps extends AsyncViewProps	onSelect	(approval: Approval) => void	No
ApprovalInboxProps extends AsyncViewProps	className	string	No
ApprovalPolicyEditorProps	policy	ApprovalPolicy	No
ApprovalPolicyEditorProps	onSaved	(policy: ApprovalPolicy) => void	No
ApprovalPolicyEditorProps	onDeleted	(policy: ApprovalPolicy) => void	No
ApprovalPolicyEditorProps	className	string	No
ApprovalPolicyListProps	onSelect	(id: string) => void	No
ApprovalPolicyListProps	selectedId	string	No
ApprovalPolicyListProps	className	string	No
ApprovalRequestDialogProps extends ApprovalRequestInput	open	boolean	Yes
ApprovalRequestDialogProps extends ApprovalRequestInput	onOpenChange	(open: boolean) => void	Yes
ApprovalRequestDialogProps extends ApprovalRequestInput	onCreated	(approval: Approval) => void	No
ApprovalRequestDialogProps extends ApprovalRequestInput	className	string	No
ApprovalRequestTriggerProps extends ApprovalRequestInput, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'action' \| 'onError'>	onCreated	(approval: Approval) => void	No
ApprovalTimelineProps	approval	Approval	Yes
ApprovalTimelineProps	className	string	No