Toolbar

Stable v1.0.2

A layout bar for grouping actions, filters, and inputs along the top of a view, with start/center/end slots so alignment isn't a fight with flexbox.

Interactive Playground

Combine every prop live — orientation, variant, gap, wrap, and size — and copy the resulting code. The preview box is narrowed to make wrap/scroll behavior visible.

Layout

Orientation

Horizontal

Wrap Sections

Appearance

Variant

Surface

Spacing

Gap

Small (sm)

Sizing

Size (Padding)

Medium (md)

Live Source Code

<Toolbar>
  <template #start>
    <Button icon="lucide:filter" variant="text" size="sm" />
    <Button icon="lucide:search" variant="text" size="sm" />
    <Button label="Refresh" icon="lucide:refresh-cw" variant="text" size="sm" />
  </template>

  <template #end>
    <Button label="Export" icon="lucide:download" severity="primary" variant="solid" size="sm" />
    <Button label="Create" severity="success" size="sm" />
  </template>
</Toolbar>

Dashboard Header

A standard "Start and End" configuration using the surface variant. Perfectly separates filters from primary actions.

Template

<Toolbar>
  <template #start>
    <InputGroup>...</InputGroup>
    <Divider layout="vertical" />
    <Button icon="lucide:filter" />
  </template>

  <template #end>
    <Button label="Export" severity="primary" variant="solid" />
    <Button label="Create" severity="success" />
  </template>
</Toolbar>

Advanced Command Bar

Utilizing the center slot for status indicators or navigation breadcrumbs while keeping actions balanced on either side.

Template

<Toolbar variant="outline" gap="xs">
  <template #start>
    <Button icon="lucide:chevron-left" variant="text" severity="secondary" rounded />
    <div class="ml-1 flex flex-col">
      <span class="text-xs font-bold text-main">VOY-882-SG</span>
      <span class="text-[10px] text-muted uppercase">Manifest Details</span>
    </div>
  </template>

  <template #center>
    <div class="flex items-center gap-4 rounded-full border border-main bg-surface px-4 py-1.5">
      <span class="flex items-center gap-2 text-xs font-medium text-success">
        <div class="h-2 w-2 rounded-full bg-success"></div>
        At Port
      </span>
      <Divider layout="vertical" size="xs" />
      <span class="text-xs font-medium text-main">Singapore Terminals</span>
    </div>
  </template>

  <template #end>
    <Button icon="lucide:more-vertical" variant="text" severity="secondary" rounded />
  </template>
</Toolbar>

Vertical Orientation

Transform the toolbar into a vertical action strip for sidebars or property editors using orientation="vertical".

Editor Tools

Vertical toolbars are ideal for mapping interfaces or drawing tools in your logistics manifest editor.

Template

<Toolbar orientation="vertical" variant="surface" gap="md">
  <template #start>
    <Button icon="lucide:mouse-pointer-2" variant="text" size="sm" />
    <Button icon="lucide:hand" variant="text" size="sm" severity="secondary" />
  </template>
  <template #center>
    <Divider layout="horizontal" variant="dashed" />
  </template>
  <template #end>
    <Button icon="lucide:plus-circle" severity="success" size="sm" />
    <Button icon="lucide:trash-2" severity="danger" variant="text" size="sm" />
  </template>
</Toolbar>

API Reference

Props

Name	Type / Signature	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Lays out the start/center/end sections in a row or column.
wrap	boolean	true	Allows sections to wrap onto multiple lines instead of scrolling.
gap	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"sm"	Spacing between items within each section.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Scales the toolbar's own outer padding, independent of gap.
variant	"flat" \| "outline" \| "surface"	"surface"	Visual background/border treatment of the toolbar container.

Slots

Slot Name	Exposed Bindings	Description
start	-	Content aligned to the leading edge.
center	-	Content centered and allowed to grow to fill remaining space.
end	-	Content aligned to the trailing edge.