TaskCard
Business-agnostic task-card parts for composing metadata, content, and status actions.
Match the Tasks tab toolbar and board spacing
Preserve the source hierarchy before connecting product state.
import {
TaskCard,
TaskCardBody,
TaskCardChannel,
TaskCardDescription,
TaskCardLegacy,
TaskCardMeta,
TaskCardNumber,
TaskCardRow,
TaskCardStatus,
TaskCardTitle,
TaskStatusIcon,
} from "raft-ui";
<TaskCard>
<TaskCardRow>
<TaskCardBody>
<TaskCardMeta>
<TaskCardChannel />
<TaskCardStatus status="in-progress">
<TaskStatusIcon status="in-progress" />
</TaskCardStatus>
<TaskCardNumber />
<TaskCardLegacy />
</TaskCardMeta>
<TaskCardTitle />
<TaskCardDescription />
</TaskCardBody>
</TaskCardRow>
</TaskCard>Match the Tasks tab toolbar and board spacing
Preserve the source hierarchy before connecting product state.
Verify a deliberately long task title wraps to three lines without pushing the status control outside the card
The description also wraps and clamps so dense board columns remain scannable at the source width.
Retire the legacy task inspector
Match the Tasks tab toolbar and board spacing
Preserve the source hierarchy before connecting product state.
Connect keyboard drag feedback
Announce allowed and blocked status targets.
Review task filter empty states
Compare empty, filtered empty, loading, and failure structures.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
busy | boolean | false | Marks the card as busy without owning task workflow policy. |
disabled | boolean | false | Marks the card as disabled. Interaction policy stays consumer-owned. |
...props | useRender.ComponentProps<"article"> | — | Card root. Consumers attach an optional open action with native article props. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Structural row around the flexible text body. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Flexible column for meta, title, and description. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Metadata row. Consumers render only the fields their context needs. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Optional channel label in the metadata row. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Task number or identifier in the metadata row. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"span"> | — | Optional legacy marker in the metadata row. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"p"> | — | Task title supplied by the consumer. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"p"> | — | Optional supporting description under the title. |
| Prop | Type | Default | Description |
|---|---|---|---|
status | "todo" | "in-progress" | "in-review" | "done" | "closed" | — | Task status that drives the trigger surface color and icon. |
busy | boolean | false | Disables the status trigger while a change is pending. |
...props | useRender.ComponentProps<"button"> | — | Status trigger passed to TaskStatusSelect; its click does not open the card. |