Approval Flow

Multi-stage approvals: sequential and parallel stages, decisions with reasons, history. Pro · Work and teams › Sales and processes

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add approval-flow

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ApprovalFlow } from 'valyro-ui-pro';

Props

Prop	Type	Default
`stages`	`ApprovalStage[]`		Controlled `stages`; use with `onStagesChange`.
`defaultStages`	`ApprovalStage[]`		Initial `stages` when uncontrolled.
`onStagesChange`	`(stages: ApprovalStage[]) => void`		Called with the new `stages` when it changes.
`history`	`ApprovalHistoryEntry[]`		Controlled `history`; use with `onHistoryChange`.
`defaultHistory`	`ApprovalHistoryEntry[]`		Initial `history` when uncontrolled.
`onHistoryChange`	`(history: ApprovalHistoryEntry[]) => void`		Called with the new `history` when it changes.
`currentUserId`	`string`		Approver id of the person viewing; shows the decision bar when it is their turn.
`onDecision`	`(decision: ApprovalDecisionInput) => unknown`		Called when the current user decides. May return a promise: the dialog waits and shows a rejection as an error; the stages and history update once it resolves.
`onComment`	`(comment: string) => unknown`		Called with a new comment; it is added to the history as well.
`title`	`ReactNode`		Request title.
`description`	`ReactNode`		Request summary under the title (amount, vendor, links…).
`requester`	`{ name: string; src?: string }`		Who submitted the request: avatar and "Requested by" line in the header. Also the author of comments posted when the current user isn't one of the approvers.
`hideHistory`	`boolean`	`false`	Hide the activity column.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<ApprovalFlowLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration
Course Path Navigator — Course map: modules, locks, progress and skills, a list on narrow screens
Calendar View — Event calendar
Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
Kanban Board — Task board
Gantt Chart — Gantt charts with dependencies and drag to reschedule
Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
Team Members — Team members: roles, email invites, pending invitations, seat count
Org Chart — Org chart: zoomable, pannable tree with search and collapsible branches
Activity Feed — Activity feed

Previous: CRM Pipeline · Next: Goal Tracker · All Work and teams