Approval route

A React component in Beamline's Data & tables category.

A policy you can read by trying it: an amount on a log scale with the thresholds as marks (the arrows stop just under, at and just over each), the request's choices and facts, and the route the host's policy gives it: stages of approvers in order, each with the rule that put them there, what they decide and how long they usually take, an away approver's stand-in, a missing approver that blocks the route; the policy's numbered sentences light as they apply.

Use it for

Spend, purchasing, payroll or time-off apps: on the policy settings page (what does this policy do?) or on a request form (who will approve this?).
The host's policy engine resolves the route; the part draws it, the thresholds and the rules that apply, and never decides who approves.

Not for

Building the policy itself (conditions, branches) → flowchart or a rule editor.
One approval decision on a request → approval-card.

Anatomy

header: the label
request: the amount scale (log, thresholds as marks, readout), the choices (segmented) and facts (switches)
summary: N approvers · usually about T, No approval: it goes through on submit, or Can't be approved as the policy stands
route: stages in order with arrows; a stage of several says Any one approves or All must approve; a step: avatar, name (or the stand-in), role, Must approve / Gets a copy · usually T · Rule N, the away note or the missing note
policy: numbered sentences, the applying ones in full ink with Applies

States

no approval
one stage
several stages
a stage of several (any one / all)
a copy
away (stand-in)
missing (blocked)
exactly at a threshold

Keyboard

The amount is the Scrubber's slider: ←/→ stop just under, at and just over each threshold, Page Up/Down jump between thresholds, Home/End the ends
Tab reaches the choices and facts; each change that settles says the route and the summary once (a polite status)

Motion

A stage that joins grows in at its place and the route slides (the shared FLIP); the summary changes in place. Nothing runs at rest; reduced motion places everything.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	What is being approved: "Purchase requests", "Payroll runs".
`amount` (required)	`{ min: number; max: number; thresholds: { value: number; label?: string \| undefined; }[…`	—	The amount scale: drawn logarithmically from `min` (above 0) to `max`, with each threshold as a mark; the arrows stop just under, at and just over every threshold (a step of `unit`, default 1), Page Up/Down jump between them.
`choices`	`ApprovalChoice[]`	—
`flags`	`{ id: string; label: string; }[]`	—
`value`	`ApprovalRequest`	—	Controlled request; omit to use defaultValue.
`defaultValue`	`ApprovalRequest`	—	Initial selection when uncontrolled; omitted by default.
`onValueChange`	`((request: ApprovalRequest) => void)`	—	Reports the selected value after a change; no callback by default.
`rules` (required)	`{ id: string; text: ReactNode; }[]`	—	The policy as numbered sentences, in order; the ones the current route uses light.
`resolve` (required)	`(request: ApprovalRequest) => ApprovalStage[]`	—	The host's policy engine: the stages a request goes through, in order. The part never decides who approves.
`format`	`((amount: number) => string)`	—	Money in the host's own format.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "step" \| "request" \| "route" \| "policy", string>>`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Used in

Approval policy

Dependencies

lucide-react

Import

import { ApprovalRoute } from "@beamline/approval-route";

Get it

Approval route is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Approval routeComplete system · $49

A policy you can read by trying it.

Who approves this purchase?

A $12,000 order from a new supplier: the manager, then Maya Chen as the budget owner, a security reviewer (either one), then the finance director with her stand-in while she is away, and a copy to accounts payable; the usual time adds up stage by stage. Scrub the amount and the route grows and shrinks at the thresholds; change the department or the supplier and its stations change.

0 × 0full

A $1,200 request, scrubbed

Scrub the amount: the budget owner joins at $2,500, the finance director at $10,000 and the CFO at $50,000 (the arrows stop just under, at and just over each threshold). Dana is away, so Priya approves instead; a new supplier adds a security review, any one reviewer.

0 × 0full

A level nobody can approve

A payroll run of $100,000 or more needs level 2, whose approver left the company: the route says it can't be approved as the policy stands, in warn, instead of waiting on nobody.

0 × 0full

Small enough to go through

Under the first threshold there is no route: the request goes through on submit, said in words, never as 0 approvers.

0 × 0full

About Approval route

← Split anything Proposal twin →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Approval route

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Built from

Used in

Dependencies

Import

Get it

More in Data & tables