Patterns
Take someone from a queue of work to a decision: open the item, read it, comment, and approve or send it back.
How it works
- The inbox lists tasks with due date and status; the person opens one in place.
- The document and its fields sit side by side; comments sit beside the passage they refer to.
- Approve and Send back sit together; Send back asks for a reason.
- After the decision, move to the next task and say what happened.
See it built: inbox full-screen page.
Elements
Inbox · DocumentViewer · CommentThread · ButtonGroup · Confirmation · Toast · Banner
Usability
Do
- Show who else has acted on the task, and when.
- Keep the decision buttons visible while the document scrolls.
Don’t
- Don’t approve on a single key press without a visible focus target.
Accessibility
- Task rows expose their status and due date as text, not only as color or an icon.
- The decision is announced, and focus moves to the next task’s heading.
Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.