nabs-ui-toolbar

Reusable React toolbar control for the Nabs UI library.

Usage

import {
  Bars3Icon,
  PlusIcon,
  PencilSquareIcon,
  TrashIcon,
} from "@heroicons/react/24/outline";
import { Toolbar } from "@net-advantage/nabs-ui-toolbar";

const items = [
  { id: "menu", icon: Bars3Icon, label: "Menu", labelPosition: "right" },
  { id: "create", icon: PlusIcon, label: "Create", labelPosition: "right" },
  { id: "edit", icon: PencilSquareIcon, label: "Edit", labelPosition: "right" },
  { id: "delete", icon: TrashIcon, label: "Delete", labelPosition: "right" },
];

export function Example() {
  return (
    <Toolbar
      aria-label="Editor commands"
      items={items}
      onItemSelect={({ itemId }) => console.log(itemId)}
    />
  );
}

Props

• items defines command buttons in horizontal order.
• onItemSelect fires with command id and click event details.
• labelPosition per item supports left, right, top, and bottom.
• label is optional; icon-only commands are supported.