TaskChip
An inline chip whose caller supplies the task-status icon as content.
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>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.
Use size="sm" when the chip sits in one row with Badges, such as a conversation card's metadata row, so it matches their text size and height.
Default
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.
variantdefault: "default""default" | "inline"
Inline uses a neutral, borderless inline surface with a 2px leading icon inset; task status continues to color only the icon.
sizedefault: "default""default" | "sm"
Default variant only. sm takes the sm Badge's text size and height, for a chip that shares a row with Badges.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
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. |
size | "default" | "sm" | "default" | Default variant only. sm takes the sm Badge's text size and height, for a chip that shares a row with Badges. |
status | "todo" | "in-progress" | "in-review" | "done" | "closed" | — | Resolved task status. Selects the chip surface; the caller renders the matching icon. |
loading | boolean | — | Dims the chip and drops pointer events while the consumer resolves the task. |
render | useRender.RenderProp | — | Element substitution. Pass an anchor when the consumer owns navigation; the chip renders a span otherwise. |
...props | useRender.ComponentProps<"span"> | — | Native span attributes, plus ref and className. |