# Toolbar

A compact action panel with one Tab entry and directional keyboard navigation.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
| `loop` | `boolean` | `true` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "role">` | `Forwarded` |