Toolbar component — a horizontal row of action buttons with separators and groups.
Standalone toolbar for formatting, editing actions, or any grouped action bar. Zero JavaScript — all toggle state is managed by the LiveView. Composes well with buttons and separators.
Variants
| Variant | Description |
|---|---|
:default | Simple inline toolbar with border |
:floating | Elevated toolbar with shadow and rounded corners |
Sizes
| Size | Button height |
|---|---|
:sm | h-8 (32 px) |
:md | h-9 (36 px) |
:lg | h-10 (40 px) |
Examples
<%!-- Basic formatting toolbar --%>
<.toolbar>
<:item aria_label="Bold" pressed={@bold} on_click="toggle_bold">B</:item>
<:item aria_label="Italic" pressed={@italic} on_click="toggle_italic">I</:item>
<:separator />
<:item aria_label="Link" on_click="add_link">🔗</:item>
</.toolbar>
<%!-- Floating variant --%>
<.toolbar variant={:floating}>
<:item aria_label="Align left" on_click="align_left">←</:item>
<:item aria_label="Align center" on_click="align_center">↔</:item>
</.toolbar>Summary
Functions
Renders a horizontal toolbar with action buttons, separators and groups.
Functions
Renders a horizontal toolbar with action buttons, separators and groups.
Examples
<.toolbar>
<:item aria_label="Bold" pressed={@bold} on_click="toggle_bold">B</:item>
<:separator />
<:item aria_label="Italic" on_click="toggle_italic">I</:item>
</.toolbar>Attributes
variant(:atom) - Visual style — :default (inline) or :floating (elevated, rounded). Defaults to:default. Must be one of:default, or:floating.size(:atom) - Button height size. Defaults to:md. Must be one of:sm,:md, or:lg.class(:string) - Additional CSS classes merged via cn/1. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the root element.
Slots
item- An action button in the toolbar.separator- A visual divider between toolbar sections.group- A logical group of toolbar items.