Toolbar

The Toolbar component provides a container for grouping action buttons and controls.

Import

<script>
  import { Toolbar } from 'svelte-fluentui';
</script>
svelte

Basic Usage

<Toolbar>
  <Button>New</Button>
  <Button>Open</Button>
  <Button>Save</Button>
  <Divider orientation="vertical" />
  <Button>Cut</Button>
  <Button>Copy</Button>
  <Button>Paste</Button>
</Toolbar>
svelte

With Icon Buttons

<Toolbar>
  <Button icon="add" variant="ghost">New</Button>
  <Button icon="folder" variant="ghost">Open</Button>
  <Button icon="save" variant="ghost">Save</Button>
</Toolbar>
svelte

Vertical Toolbar

<Toolbar orientation="vertical">
  <Button icon="home">Home</Button>
  <Button icon="search">Search</Button>
  <Button icon="settings">Settings</Button>
</Toolbar>
svelte

Properties

PropertyTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Toolbar layout direction
variant'default' | 'subtle''default'Toolbar visual style

Slots

SlotDescription
defaultToolbar content and controls
Last update at: Invalid Date