StatusIcon

A 14px circle for task status: dashed (backlog), empty (todo), half filled (in_progress), a solid disc with a check (done), a solid disc with a cross (canceled). It is decorative (aria-hidden), so whatever shows it should name the status in text. Colour comes from soft-text tokens through currentColor.

The component is exported as StatusIcon; the page and the @crisp-ui-kit/crisp/taskicons subpath are named for the file it lives in. Pair it with PriorityIcon in a task row.

Installation

npm install @crisp-ui-kit/crisp

import { StatusIcon } from "@crisp-ui-kit/crisp";
// or, to import only this component:
import { StatusIcon } from "@crisp-ui-kit/crisp/taskicons";

Usage

import { StatusIcon } from "@crisp-ui-kit/crisp";

<StatusIcon status="in_progress" />
<StatusIcon status="done" markColor="#fff" />

markColor is the colour of the check or cross drawn on the solid done and canceled discs. It defaults to var(--crisp-bg-surface, #fff), the surface behind the icon; set it when the icon sits on a different background.

Props

StatusIcon also accepts every SVG attribute except children.

status is a TaskStatusValue: "backlog" | "todo" | "in_progress" | "done" | "canceled".