TaskCard

Business-agnostic task-card parts for composing metadata, content, and status actions.

Preview#

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

Controls

Anatomy#

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>

Usage#

States#

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#139

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.

#126LEGACY

Retire the legacy task inspector

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

#121

Review task filter empty states

Compare empty, filtered empty, loading, and failure structures.

API#WIP

TaskCard#

busydefault: false
boolean
Marks the card as busy without owning task workflow policy.
disableddefault: false
boolean
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.

TaskCardRow#

...props
useRender.ComponentProps<"div">
Structural row around the flexible text body.

TaskCardBody#

...props
useRender.ComponentProps<"div">
Flexible column for meta, title, and description.

TaskCardMeta#

...props
useRender.ComponentProps<"div">
Metadata row. Consumers render only the fields their context needs.

TaskCardChannel#

...props
useRender.ComponentProps<"span">
Optional channel label in the metadata row.

TaskCardNumber#

...props
useRender.ComponentProps<"span">
Task number or identifier in the metadata row.

TaskCardLegacy#

...props
useRender.ComponentProps<"span">
Optional legacy marker in the metadata row.

TaskCardTitle#

...props
useRender.ComponentProps<"p">
Task title supplied by the consumer.

TaskCardDescription#

...props
useRender.ComponentProps<"p">
Optional supporting description under the title.

TaskCardStatus#

status
"todo" | "in-progress" | "in-review" | "done" | "closed"
Task status that drives the trigger surface color and icon.
busydefault: false
boolean
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.