Path Approval Workflow

ProNew

A multi-step approval path where the current approver can approve or reject with a reason, rejected stages are marked in text and later stages stay locked.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this when a request needs sign-off from several people in a fixed order: expenses, purchase orders, publishing, access.

Do not use it when approvers act in parallel or any one of them can approve (show a list of approvers with their states instead).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`steps`	`ApprovalStep[]`	required	-
`onApprove`	`(id: string) => void \| Promise<void>`	required	Called with the step id when approved.
`onReject`	`(id: string, reason: string) => void \| Promise<void>`	required	Called with the step id and the reason when rejected.

Accessibility

A rejected step says "(rejected)" in its label, so the state is text.
The summary line is a status region that says who is next or why it stopped.
Rejection needs a labelled reason and a separate confirm button.

Testing

The pattern ships with a Testing Library test (path-approval-workflow.test.tsx) that covers the first approver, ordered approval, rejection with a reason and going back.

Guide and examples

When to use it

Use this when a request needs sign-off from several people in a fixed order: expenses, purchase orders, publishing, access.

Do not use it when approvers act in parallel or any one of them can approve (show a list of approvers with their states instead).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`steps`	`ApprovalStep[]`	required	-
`onApprove`	`(id: string) => void \| Promise<void>`	required	Called with the step id when approved.
`onReject`	`(id: string, reason: string) => void \| Promise<void>`	required	Called with the step id and the reason when rejected.

Accessibility

A rejected step says "(rejected)" in its label, so the state is text.
The summary line is a status region that says who is next or why it stopped.
Rejection needs a labelled reason and a separate confirm button.

Testing

The pattern ships with a Testing Library test (path-approval-workflow.test.tsx) that covers the first approver, ordered approval, rejection with a reason and going back.