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