KanbanBoard
A pipeline board: columns of cards that move between stages by pointer drag, by a Move control on each card, or by keyboard alone, with counts, empty columns and a work-in-progress limit
import { KanbanBoard } from "@danagraph/design-system/patterns"Props
| Prop | Type | Default | Description |
|---|---|---|---|
columnsreq | { id: string; title: string; limit?: number }[] | — | Stages in order; limit is a work-in-progress limit shown as n / limit and flagged, not enforced |
cardsreq | { id: string; columnId: string; title: string; description?: string; meta?: string }[] | — | Controlled; order within a column is array order, and a card whose columnId matches no column is not rendered |
onMovereq | (move: { cardId: string; toColumnId: string; toIndex: number }) => void | — | Called for every move by pointer, Move control or keyboard; apply it there with applyKanbanMove(cards, move). The announcement and the return of focus follow that update, so a move refused or applied later is silent |
label | string | "Board" | Accessible name of the board |
columnsrequired{ id: string; title: string; limit?: number }[]Default —Stages in order; limit is a work-in-progress limit shown as n / limit and flagged, not enforced
cardsrequired{ id: string; columnId: string; title: string; description?: string; meta?: string }[]Default —Controlled; order within a column is array order, and a card whose columnId matches no column is not rendered
onMoverequired(move: { cardId: string; toColumnId: string; toIndex: number }) => voidDefault —Called for every move by pointer, Move control or keyboard; apply it there with applyKanbanMove(cards, move). The announcement and the return of focus follow that update, so a move refused or applied later is silent
labelstringDefault "Board"Accessible name of the board
Accessibility
- The board is a labelled group; each column is a section labelled by its heading and its cards are an ordered list
- Every card is focusable: Alt with left or right moves it to the end of the previous or next column, Alt with up or down moves it one position
- Each card has a Move control listing the columns, for screen readers and anyone who does not drag
- After a move focus is on the moved card and a polite live region states the column and position
- Over a limit the column reads OVER LIMIT in words; colour is never the only signal
This component was designed to express:
Explore Related
Queue of pending human approvals with priority ordering
A recurring loop of stages that does not end: a track of 2 to 8 stages, the live stage marked, and the return from the last stage to the first drawn with the cycle count on it
Vertical rail rendering one AG-UI run as lifecycle phases: RunStarted, StepStarted/StepFinished segments, and a terminal cap (finished/interrupt/error). Supports one level of nested child runs (parentRunId concept). Composes the AgentTimeline track language with TaskStateBadge-consistent colors.