Toolbar

Board-level button bar that wires add-card, undo/redo, and sort actions to the Kanban store. Wraps @svar-uisvelte-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-uisvelte-kanban";

<Toolbar {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):

<script>
  import { Kanban, Toolbar } from "@svar-uisvelte-kanban";
  let api = $state();
</script>

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

Full default set with undo/redo and sort:

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

Custom items replacing the defaults:

<script>
  import { Kanban, Toolbar, getToolbarItems } from "@svar-uisvelte-kanban";

  let api = $state();

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

<Toolbar {api} {items} />
<Kanban {cards} {columns} init={a => (api = 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