Toolbar

Use Toolbar

Toolbar is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Toolbar, Button, Toggle } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Toolbar label="Editor actions">
        <Button variant="ghost">Undo</Button>
        <Toggle variant="ghost">Bold</Toggle>
        <Button variant="ghost">Share</Button>
      </Toolbar>
    </FloodRoot>
  );
}

Design notes

• Use Button, IconButton, Toggle, native buttons/links and Menu triggers. Keep inputs, Select, Tabs and ToggleGroup outside this action-only toolbar.
• Arrows move focus without activation; Home/End jump to the ends. Disabled and hidden actions are skipped. One Tab entry is established after hydration; before JavaScript native child tab order remains.
• Horizontal arrows follow writing direction. Vertical arrows move between actions; open a vertical toolbar Menu with Enter/Space. Horizontal menus retain ArrowUp/Down opening.
• loop defaults to true. Native div props/ref target the toolbar; preserve a meaningful label. Available in 0.2.4.

API reference