Toolbar

Board-level button bar that wires add-card, undo/redo, and sort actions to the Kanban store. Wraps @svar-ui/react-toolbar with kanban-specific defaults: localized labels, reactive history-based disable for undo/redo, and a built-in click handler that routes known item ids to api.exec(...).

Usage

import { Toolbar } from "@svar-ui/react-kanban";

<Toolbar api={api} />

Props

Prop	Type	Default	Description
api	KanbanInstanceApi | null	null	Kanban instance for click handlers and history state
items	any[]	[]	Explicit item array; replaces the default set when non-empty
add	boolean	true	Show the add-card primary button and separator
undo	boolean	false	Show undo/redo icon buttons; auto-disabled from history state
sort	boolean	false	Show the collapsed sort menu (label/priority asc/desc, clear)

When items is non-empty, the add, undo, and sort props are ignored. Items with a built-in id (add-card, undo, redo, sort-clear, etc.) keep their default click handler unless the item provides its own handler.

Default item ids

Item id	Action dispatched	Group
add-card	exec("add-card", { card: {}, edit: true })	add
undo	exec("undo", {})	undo
redo	exec("redo", {})	undo
sort-label-asc	exec("sort-cards", { sort: { field: "label", dir: "asc" } })	sort
sort-label-desc	exec("sort-cards", { sort: { field: "label", dir: "desc" } })	sort
sort-priority-asc	exec("sort-cards", { sort: { field: "priority", dir: "asc" } })	sort
sort-priority-desc	exec("sort-cards", { sort: { field: "priority", dir: "desc" } })	sort
sort-clear	exec("sort-cards", { sort: null })	sort

Example

Minimal toolbar with the add button (default):

import { Kanban, Toolbar } from "@svar-ui/react-kanban";
import { useState } from "react";

const [api, setApi] = useState(null);

<Toolbar api={api} />
<Kanban cards={cards} columns={columns} init={a => setApi(a)} />

Full default set with undo/redo and sort:

<Toolbar api={api} undo sort />
<Kanban cards={cards} columns={columns} history init={a => setApi(a)} />

Custom items replacing the defaults:

import { Kanban, Toolbar, getToolbarItems } from "@svar-ui/react-kanban";
import { useState } from "react";

const [api, setApi] = useState(null);

const items = [
  ...getToolbarItems({ add: true }),
  {
    id: "sort-deadline",
    comp: "item",
    text: "Deadline",
    handler: () => api.exec("sort-cards", {
      sort: { field: "deadline", dir: "asc" },
    }),
  },
];

<Toolbar api={api} items={items} />
<Kanban cards={cards} columns={columns} init={a => setApi(a)} />

Related

• Toolbar guide - mounting, built-in buttons, custom items
• getToolbarItems - build the default item array
• history - required for undo/redo buttons
• sort-cards - dispatched by the built-in sort menu