Task Item

One task of an agent plan, with where it is: not started, running, done, failed or skipped.

import { TaskItem } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { TaskItem } from '@basiiik/ui';

<TaskItem>Read the component specs</TaskItem>

Status is the status prop and is shown as a shape and spoken as a word; the running task carries aria-current="step". No interactive states.
Storybook: Agents/Task item.

Props

Prop	Type	Notes
`status`	`"error" \| "done" \| "pending" \| "running" \| "skipped"`	Default "pending"
`children` required	`ReactNode`
`description`	`ReactNode`
`statusText`	`string`

States. Status is the status prop and is shown as a shape and spoken as a word; the running task carries aria-current="step". No interactive states.

Native attributes such as className, id and data-* are forwarded to the root element.

Parts

`TaskList`

The ordered list the TaskItems go in (a plain <ol>; the order is the order the work runs in). Inside a PlanCard it is the plan's steps. Give it an aria-label when it stands alone.

<TaskList aria-label="Plan"><TaskItem status="done">Read the specs</TaskItem><TaskItem status="running">Write the page</TaskItem></TaskList>

Use it when

The steps of an agent plan and where each one is
A checklist an agent works through and reports on
A todo list (to-do list) with a status per item that an agent reports on as it works

Do not use it when

Steps a person fills in (use Stepper)
A to-do list the person edits (use Checkbox in a List)

Rules for agents

Put TaskItems inside a TaskList; the order is the order the work runs in
Move the status as the work moves: pending, then running, then done or error
At most one task is running at a time
On failure set status="error" and say why in description
Give a standalone TaskList an aria-label

Avoid

Showing progress only as a coloured dot
A hand-built list of divs with check icons
Several tasks running at once in a sequential plan

Writing the content

Start with a verb: "Read the component specs", "Write the page"
Keep each task to one line

Accessibility

A plain ordered list; each item's status is spoken after its text (completed, in progress, failed...), never only a colour or shape
The running task has aria-current="step"
The status circle is hidden from assistive technology

Colour tokens it reads

color.bg.brand.defaultcolor.bg.danger.defaultcolor.bg.mutedcolor.bg.success.defaultcolor.border.brandcolor.border.inputcolor.text.dangercolor.text.on-dangercolor.text.on-successcolor.text.primarycolor.text.secondary

agents 5 Figma variants Try it in the live demo