TaskChip

An inline chip whose caller supplies the task-status icon as content.

GitHub

Preview#

AT
Atlas2:22 PM

Pick up #16, continue #205, then close #47 and archive #480. Resolving #340.

AT
Atlas2:23 PM
Split the ownership boundary work so the migration notes stay reviewable.
#16@Cuvii#205@Noah#340@Ada#47@Atlas#480#512

Anatomy#

import { TaskChip, TaskInProgressIcon, TaskInReviewIcon } from "raft-ui";

<TaskChip status="in-progress" render={<a href="…" />}>
  <TaskInProgressIcon />
  #205
</TaskChip>

<TaskChip variant="inline" status="in-review" render={<a href="…" />}>
  <TaskInReviewIcon />
  #340
</TaskChip>

<TaskChip variant="inline" status="in-review" loading>
  <TaskInReviewIcon />
  #340
</TaskChip>

Usage#

Variants#

default shows the full task-status surface. Use inline inside dense message copy when the task icon should carry the status and the reference stays visually quiet.

#205Default
#205Inline

Statuses and loading#

status controls the chip surface. Pass a named task-status icon for a known status, or TaskStatusIcon when status comes from consumer-owned data. loading dims the chip and drops pointer events while the consumer resolves the task.

#16Todo
#205In Progress
#340In Review
#47Done
#480Closed
#512Loading

API#WIP

PropTypeDefaultDescription
variant"default" | "inline""default"Inline uses a neutral, borderless inline surface with a 2px leading icon inset; task status continues to color only the icon.
status"todo" | "in-progress" | "in-review" | "done" | "closed"—Resolved task status. Selects the chip surface; the caller renders the matching icon.
loadingboolean—Dims the chip and drops pointer events while the consumer resolves the task.
renderuseRender.RenderProp—Element substitution. Pass an anchor when the consumer owns navigation; the chip renders a span otherwise.
...propsuseRender.ComponentProps<"span">—Native span attributes, plus ref and className.