Docs / Plans and tasks /
TaskLifecycleRow
Horizontal lifecycle tracker showing a task's progression through its defined states.
Preview
CreatedSubmittedWorkingCompleted
Variants
Created
CreatedSubmittedWorkingCompleted
Submitted
CreatedSubmittedWorkingCompleted
Working
CreatedSubmittedWorkingCompleted
Input required
CreatedSubmittedWorkingCompletedInput required
Blocked
CreatedSubmittedWorkingCompletedBlocked
Completed
CreatedSubmittedWorkingCompleted
Failed
CreatedSubmittedWorkingCompletedFailed
Cancelled
CreatedSubmittedWorkingCompletedCancelled
Props
| Prop | Type | Description |
|---|---|---|
| current* | LifecyclePhase | The phase the task is currently in. Happy-path phases (created → submitted → working → completed) render as a connected spine; fork states (input-required, blocked, failed, cancelled) freeze the spine at "working" and append a coloured chip. |
* required.
Usage
import { TaskLifecycleRow } from "@/components/tasks/task-lifecycle-row";
<TaskLifecycleRow current="working" />