1. Examples
  2. Overlay Workflows

Overlay Workflows

Modal and offcanvas examples for operator review flows

These overlays reuse the same validation, status, and detail primitives as the other workflow pages so they feel like part of the product instead of a separate component library.

When to use a modal

Use a modal when the user must acknowledge risk, confirm intent, or fix a small amount of blocking information before continuing.

The approval modal below includes a blocking validation summary and an explicit escalation note.
Short task High consequence

When to use offcanvas

Use an offcanvas panel when the operator needs to keep surrounding context in view while editing, assigning, or previewing supporting detail.

i

Keep the grid visible

Assignment, quick edit, and note-taking generally fit the offcanvas path better than a modal.

Context retained Multi-step work

Launchable examples

Both buttons below are wired through the package helper in dist/inc-design-language.js.

Record
AP-2026-00142
Current owner
AP Team
Blocking issue
Missing W-9
Requested amount
$18,240.22