# Toolbar

> Generic horizontal toolbar of actions.

- **Level**: molecule · **Status**: stable · **Role**: action
- **Import**: `import { Toolbar } from "@rrios-forge/ui/molecules/toolbar";`
- **Source**: `packages/ui/src/molecules/toolbar`

Compact action / filter row. Renders <div role="toolbar"> with align (start | between | end) and density (compact | comfortable). Chrome-less: items carry the grouping and a framed toolbar is its host's Card. Children keep their intrinsic width; mark the one that should grow with `data-toolbar-grow`. The molecule never reorders children — reading order matches visual order. Patterns consulted: Patterns/Visual Priority · ActionHierarchy, Patterns/Density & Growth · ActionOverflow.

## Use it for

- Toolbar / split action → `Toolbar` or `ActionGroup` / `SplitAction`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `align` | — | `start` `between` `end` | `between` | Distribution along the main axis. |

## Stories

- [Playground](/?path=/story/components-molecules-toolbar--playground) · frame: `/iframe.html?id=components-molecules-toolbar--playground&viewMode=story`
- [With search](/?path=/story/components-molecules-toolbar--with-search) · frame: `/iframe.html?id=components-molecules-toolbar--with-search&viewMode=story`
- [With filters](/?path=/story/components-molecules-toolbar--with-filters) · frame: `/iframe.html?id=components-molecules-toolbar--with-filters&viewMode=story`
- [With actions](/?path=/story/components-molecules-toolbar--with-actions) · frame: `/iframe.html?id=components-molecules-toolbar--with-actions&viewMode=story`
- [Dense](/?path=/story/components-molecules-toolbar--dense) · frame: `/iframe.html?id=components-molecules-toolbar--dense&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).