Toolbar

Horizontal action strip — Start, Center, End slots. Density (Comfortable / Compact)

SSR mode

Examples

Comfortable (default)

Compact density

12 items

With center slot

Page title

Bare (no border, no background)

Inline

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Toolbar	Horizontal action strip. Three slots — `Start` (left-aligned), `Center` (centred, takes remaining space), `End` (right-aligned). When `Center` is null, an empty `flex-1` spacer fills the middle so `End` stays right-aligned. `Density` controls padding, gap, and min-height via `DensityClasses`. Toolbar does NOT expose `Gutters` (Density already covers it) or `HeaderAlignment`.

Horizontal action strip. Three slots — Start (left-aligned), Center (centred, takes remaining space), End (right-aligned). When Center is null, an empty flex-1 spacer fills the middle so End stays right-aligned. Density controls padding, gap, and min-height via DensityClasses. Toolbar does NOT expose Gutters (Density already covers it) or HeaderAlignment.

Property	Type	Description
Start	RenderFragment?	Left-aligned slot. Typically filter/sort buttons or a back button.
Center	RenderFragment?	Centred slot. Optional — when null, a spacer fills the middle. Typically a title or step indicator.
End	RenderFragment?	Right-aligned slot. Typically the primary action button.
Density	Density	Vertical rhythm. Default: `Density.Comfortable`. Other value: `Compact`. Drives `DensityClasses.Padding/Gap/Height`. Shared `Density` enum.
Borders	bool	Toggles `border border-border rounded-md`. Default: `false`. Set `true` for free-standing toolbars; leave `false` when embedded in another container that has its own border.
BgFilled	bool	Toggles `bg-background`. Default: `false`.