Axie UI
Recipe

Approval timeline

A contract timeline that combines review progress, blockers, and document actions.

Preview

Review

Contract approval

  1. OKIntakePartner terms were uploaded.
  2. 2Legal reviewCounsel is checking renewal language.
  3. 3FinanceFinance owner confirms the new rate.
  4. 4SendSend countersigned copy to the account.
One blocker
The renewal cap needs a named approver before sending.

Ingredients

The recipe only uses documented Axie primitives.

StepperAlertBadgeButton

Accessibility

  • Use ordered steps for approval progress instead of disconnected status chips.
  • Describe blockers in plain text next to the review action.
  • Keep the secondary document action separate from the primary approval state.

Code

code
<Card>  <Badge tone="warning">Review</Badge>  <Stepper current="legal" items={approvalSteps} />  <Alert title="One blocker" tone="warning" />  <Button variant="outline">View packet</Button></Card>