WorkflowPage
StableA task in progress, shown as a conversation: heading, checklist, approval request and steps.
Also known as agent page, workflow
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Full page
Maya Okafor
Product team
Request missing documents
Ask for the missing documents
3 of 5 done. Here is where things stand:
- Dana WhitfieldForm ANo reply in 5 days, due in 2
- Owen ParkForm AReminder sent yesterday
- Received from Atlas, Birch and Cedar
Send a second reminder to Dana Whitfield
medium riskFind missing documents
2 people
doneSend reminders
Waiting for approval
active- 3
Confirm receipt
todo
AI can make mistakes. Check important information.
<WorkflowPage />Approve or deny the reminder to see the decision message appear under the request.
When to use it
A worked example of a long task shown as a conversation. Open items, the decision that needs a person and overall progress stack in one column, and the message box stays for questions.
Made of: Side panel · Title · Heading and status · Checklist · Approval request · Decision message · Step list · Message box with a context tag · AI notice
Use it for
- A starting point for tasks that wait on people, such as chasing documents.
- Seeing how Checklist, ApprovalPrompt and StepTimeline fit in a thread.
- Showing how to confirm a decision with a short message.
Not for
- A plain question and answer: use ThreadPage.
- One list of everything waiting for the person across tasks: use ApprovalInbox.
Do and avoid
- Dana WhitfieldNo reply in 5 days, due in 2
- Owen ParkReminder sent yesterday
- Received from Atlas and Birch
- Dana WhitfieldNo reply in 5 days, due in 2
- Owen ParkReminder sent yesterday
- Received from Atlas and Birch
Do
- Use the conversation layout so follow-up questions stay possible.
- Put the request that needs a person where it is easy to spot, between the checklist and the step list.
- Say what will be sent, to whom and when in the approval request.
- Confirm the outcome of a decision with a message, as the page does.
- Keep the status line under the heading in step with the checklist.
Avoid
- Do not mark work in progress as needing attention. Amber means a person has to act.
- Do not list finished items one by one. Fold them into one summary line.
- Do not ask for approval without a Deny option.
On a phone
- The sidebar opens from a Menu button in a side sheet on a phone, and the page shows the workflow in one column.
- The approval buttons keep their size and have a 44px tap area on touch screens. The checklist rows are not tappable.
- The page is 45rem tall at most and never taller than the phone screen height. The composer area clears the bottom safe area.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| (none) | - | none | This page takes no props. It is a reference composition with sample content, meant to be copied and adapted. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- decided
- After Approve or Deny is chosen, a line below the prompt states the decision.
Tokens
Change one of these and every part that uses it follows.
--attention / --warning-soft--success (steps)--border (checklist rules)font-serif heading
Built in
- The approval request is announced as an alert dialog named after its action.
- After a choice, a status message says "Decision: Approved" or "Decision: Denied", and screen readers hear it.
- Rows that need attention show a dot, read as "Needs attention", with written status.
- The step list tells screen readers which step is current and the state of each step.
What you need to do
- Move focus to the approval request if it appears after the page has loaded. The page does not do this.
- Tell people when a step changes state. The step list does not announce it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide