This component is deprecated. Use Stepper instead, which provides the same functionality with additional features like size variants and step descriptions.
Workflow Status
Enterprise
Workflow
Deprecated
Track progress through multi-step processes with clear visibility. Supports horizontal and vertical layouts, assignee tracking, deadline warnings, and multiple status states.
Preview
Content approval workflow with team collaboration
Progress1 of 4 complete
Content created
Sofia Rodriguez
03:30 PM
Design review
Marcus Johnson
35m left
Team feedback
O
P
Y
Published
Variants
Different layout options
Horizontal Layout
Progress1 of 4 complete
Content created
Sofia Rodriguez
03:30 PM
Design review
Marcus Johnson
35m left
Team feedback
O
P
Y
Published
Vertical Layout
Progress1 of 4 complete
Content created
Sofia Rodriguez
03:30 PM
Design review
Marcus Johnson
35m left
Team feedback
O
P
Y
Published
Compact Mode
Content created
Design review
Team feedback
Published
Status States
Complete, active, failed, skipped, and pending states
Progress1 of 3 complete
Draft created
10:00 AM
AI review
AI Agent
10:05 AM
Schedule post
Props
WorkflowStatus component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
steps | WorkflowStep[] | [] | Array of workflow steps |
layout | 'horizontal' | 'vertical' | 'horizontal' | Display layout |
onStepClick | (step: WorkflowStep, index: number) => void | — | Callback when step is clicked |
showProgress | boolean | true | Show progress bar |
showDeadlineWarnings | boolean | true | Show deadline warnings for active steps |
compact | boolean | false | Space-efficient layout |
WorkflowStep Type
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Step label |
status* | 'complete' | 'active' | 'failed' | 'skipped' | 'pending' | — | Step status |
timestamp | string | Date | null | — | Completion timestamp |
assignee | string | { name: string; avatar?: string } | — | Assigned person |
parallel_assignees | Array<{ name: string; avatar?: string }> | — | Multiple assignees |
deadline_minutes | number | — | Deadline in minutes |
elapsed_minutes | number | — | Time elapsed in minutes |
Usage
Import and implementation example
import { WorkflowStatus } from '@/blocks/workflow/workflow-status'
const steps = [ { label: 'Content created', status: 'complete', timestamp: '2025-12-20T15:30:00Z', assignee: 'Sofia Rodriguez' }, { label: 'Design review', status: 'active', assignee: { name: 'Marcus Johnson' }, deadline_minutes: 60, elapsed_minutes: 25 }, { label: 'Team feedback', status: 'pending', parallel_assignees: [ { name: 'Olivia Chen' }, { name: 'Priya Sharma' } ] }]
export default function Example() { return ( <WorkflowStatus layout="horizontal" steps={steps} showProgress={true} showDeadlineWarnings={true} onStepClick={(step, idx) => console.log(step)} /> )}Features
Built-in functionality
- Multi-step visualization: Progress display with status indicators for each step
- Five status types: Complete, active, failed, skipped, and pending states
- Layout options: Horizontal and vertical display modes
- Deadline warnings: Time remaining alerts with urgency indicators
- Assignee tracking: Shows AI/human indicators and parallel assignees
- Progress bar: Overall workflow completion percentage
- Compact mode: Space-efficient layout for constrained areas
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Steps are clickable regions with keyboard supportStatus icons have appropriate semanticsProgress bar has accessible percentageKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between steps |
| Enter / Space | Activate step click handler |
Notes
- Status indicated by icon and color
- Step labels are readable text
- Timestamps shown in readable format
- Deadline warnings include time remaining