Toolbar

This guide covers the editor's top and bottom action bars: the automatic Save/Cancel/Close buttons you get for free, how to replace them with your own items, how to turn a toolbar control into a bound field, and how the default keyboard shortcuts hook into bar actions.

The bars render @svar-ui/react-toolbar items. For the full set of item types and options, see the toolbar widget's own docs:

• Toolbar widget guide
• Toolbar widget API reference

How the bars work

An Editor can show two action bars: a top bar (topBar) and a bottom bar (bottomBar). Each one accepts three shapes:

• false - hide the bar.
• true - let the editor generate a default bar (see below).
• { items } - render your own list of @svar-ui/react-toolbar items.

Bars carry buttons, icons, labels, and menus that act on the record - save it, cancel, close the panel, or run a custom command. For editable record fields use items.

When button is clicked on toolbar, it triggers the onAction event. The button with id: "save" runs validation and saves pending changes before onAction fires. Every other id (cancel, close, delete, or your own) is passed straight through to onAction for you to handle.

Default bars

Set both bars to true and the editor picks a default layout based on placement, autoSave, readonly, and layout. Defaults only appear when both bars are exactly true - set either one to an object and the automatic bars are switched off.

State	Default bar
Inline / sidebar, manual save	Top { spacer, cancel, save }
Modal, manual save	Bottom { spacer, save, cancel }
Modal columns layout, manual save	Top { spacer, save, cancel }
Auto-save or read-only	Top { spacer, close }

So a manual-save sidebar shows Cancel/Save at the top with no extra config:

import { Editor } from "@svar-ui/react-editor";

<Editor placement="sidebar" autoSave={false} items={items} values={values} />;

An auto-save or read-only editor shows just a close icon, since there is nothing to confirm. To drop the bars entirely, set them to false:

<Editor topBar={false} bottomBar={false} items={items} values={values} />

Custom bar items

Pass { items } to build a bar by hand. Each entry is a toolbar item - a button, icon, label, spacer, or separator:

import { Editor } from "@svar-ui/react-editor";

const topBar = {
  items: [
    { comp: "spacer" },
    { comp: "button", text: "Click me", handler: () => alert("clicked") }
  ]
};

<Editor topBar={topBar} items={items} values={values} />;

Mix a primary Save with plain icon actions, and handle the ids in onAction:

import { Editor } from "@svar-ui/react-editor";

<Editor
  items={items}
  values={values}
  topBar={{
    items: [
      { comp: "button", type: "primary", text: "Save", id: "save" },
      { comp: "spacer" },
      { comp: "icon", icon: "wxi-refresh", id: "refresh" },
      { comp: "icon", icon: "wxi-delete", id: "delete" }
    ]
  }}
  onAction={({ item }) => {
    if (item.id === "refresh") reload(values.id);
    if (item.id === "delete") remove(values.id);
  }}
/>;

id: "save" still runs the save flow first; refresh and delete reach onAction untouched. The bottom bar takes the same shape - a common pattern is Save/Cancel pinned at the bottom of a modal:

<Editor
  placement="modal"
  autoSave={false}
  items={items}
  values={values}
  bottomBar={{
    items: [
      { comp: "button", type: "primary", text: "Save", id: "save" },
      { comp: "button", text: "Cancel", id: "cancel" }
    ]
  }}
  onAction={({ item }) => {
    if (item.id === "cancel") setOpen(false);
  }}
/>

Action menus and value binding

Bind a toolbar item to a value

Give a toolbar item a key and it reads and writes editor values exactly like a form field - handy for compact, record-level state (a status switch, a label) that belongs with the record but not in the main field list:

import { Editor } from "@svar-ui/react-editor";
import { Switch } from "@svar-ui/react-core";

const topBar = {
  items: [
    { comp: "label", spacer: true, key: "label" },
    { comp: Switch, key: "state" }
  ]
};

const values = {
  label: "Product N1",
  state: false
};

<Editor topBar={topBar} values={values} />;

Any component that accepts value and calls onChange({ value }) works, including a custom component passed directly as comp. Bound controls run through the same change, validation, and save flow as regular items. Keep large editable content in items and reserve bound toolbar controls for compact state.

Collapse actions into a menu

Set collapsed: true on a toolbar item to turn it into a dropdown trigger, with layout: "column" for a vertical menu body. The item's own items array becomes the menu entries:

import { Editor } from "@svar-ui/react-editor";

<Editor
  items={items}
  values={values}
  topBar={{
    items: [
      { comp: "label", spacer: true, text: "Item X12-A" },
      { comp: "separator" },
      {
        icon: "wxi-dots-v",
        collapsed: true,
        layout: "column",
        items: [
          { id: "done", comp: "item", text: "Mark as done" },
          { id: "delete", comp: "button", type: "danger", text: "Delete the item" }
        ]
      }
    ]
  }}
/>;

This keeps contextual actions one click away without lining the bar with permanent buttons.

Hotkeys

The editor binds keyboard shortcuts on its root unless you pass hotkeys={false}. A default shortcut is active only when a matching action item exists in the rendered bars:

Hotkey	Action item
ctrl+s	first item with id === "save"
escape	first item with id === "cancel" or id === "close"
delete	first item with id === "delete"

So ctrl+s only saves when a Save item is present - the default manual-save bar supplies one, so the shortcut works out of the box there.

Custom hotkeys merge over the defaults. A per-key entry overrides just that binding: a function replaces the handler, and false disables one default without touching the rest.

import { Editor } from "@svar-ui/react-editor";

<Editor
  items={items}
  values={values}
  hotkeys={{
    "ctrl+enter": () => submit(values)
  }}
/>;

To disable a single default, map it to false:

<Editor items={items} values={values} hotkeys={{ delete: false }} />

This keeps ctrl+s and escape while dropping the delete shortcut. Pass hotkeys={false} to turn all of them off.