Home/Patterns/Approval flow

Approval flow

Three compositions for the most common approval surfaces — inline card, dedicated queue, and bulk approve.

Stable3 compositions
COMPOSITION 01

Inline · single record

Approval card embedded in a detail page — reason, amount, attachments, decision.

Use whenThe approver opens one record at a time and decides in context.
● Needs approval

Refund · R-19243 · $ 38

Raised by Faith Moyo · 13:42
"Customer brought back the 2 L Mazoe — bottle was cracked. Photo attached."
Original sale
R-19243 · $ 76.20
Refund amount
– $ 38.00
COMPOSITION 02

Queue · list of pending

A dedicated page listing everything awaiting approval, with one-click decisions per row.

Use whenThe approver has a queue of decisions to work through quickly.

Pending approvals · 7

3 refunds · 2 leave requests · 2 discount overrides.

RefundR-19243 · $ 38.00
Faith Moyo · 13:42
Customer brought back cracked Mazoe.
Leave · 5 daysSarah Ndongo · 14–18 Jun
HR · approved by line manager
Already approved by line manager Brian.
Discount · 15 %R-19238 · $ 42
Faith Moyo · 11:14
Customer claimed loyalty mismatch.
COMPOSITION 03

Bulk approve · co-approver review

Multiple similar items selected for collective approval. Common for payroll co-sign, leave approval rounds.

Use whenA batch of related approvals needs a single signature — payroll, batch refunds.
Payroll run · June 2026 · approval required
Prepared by Mai Ndlovu · 187 payslips · $ 84,210 gross
Cashiers62 payslips$ 18,420
Plant operators8 payslips$ 4,800
Office staff24 payslips$ 14,400
Field buyers6 payslips$ 3,600
Teachers58 payslips$ 32,480
Boarding staff12 payslips$ 4,200
Maintenance17 payslips$ 6,310

Shared rules

Do

Show what the approver needs to decide.

Don't

Bury approvals in a separate tool.

Do

Record the decision in the audit log automatically.

Don't

Allow self-approval.