Toolbar

Displays frequently used actions or tools in a compact, easily accessible bar.

	<script lang="ts">
  import { Separator, Toolbar } from "$lib";
  import {
    TextB,
    TextItalic,
    TextStrikethrough,
    TextAlignLeft,
    TextAlignCenter,
    TextAlignRight,
    Sparkle
  } from "phosphor-svelte";
 
  let text: string[] | undefined = ["bold"];
  let align: string | undefined;
</script>
 
<Toolbar.Root
  class="flex h-12 min-w-max items-center justify-center rounded-10px border border-border bg-background p-1 shadow-mini"
>
  <Toolbar.Group
    bind:value={text}
    type="multiple"
    class="flex items-center gap-x-0.5"
  >
    <Toolbar.GroupItem
      aria-label="toggle bold"
      value="bold"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextB class="sq-6" />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem
      aria-label="toggle italic"
      value="italic"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextItalic class="sq-6" />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem
      aria-label="toggle strikethrough"
      value="strikethrough"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextStrikethrough class="sq-6" />
    </Toolbar.GroupItem>
  </Toolbar.Group>
 
  <Separator.Root class="-my-1 mx-1 w-[1px] self-stretch bg-dark-10" />
 
  <Toolbar.Group
    bind:value={align}
    type="single"
    class="flex items-center gap-x-0.5"
  >
    <Toolbar.GroupItem
      aria-label="align left"
      value="left"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextAlignLeft class="sq-6" />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem
      aria-label="align center"
      value="center"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextAlignCenter class="sq-6" />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem
      aria-label="align right"
      value="right"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextAlignRight class="sq-6" />
    </Toolbar.GroupItem>
  </Toolbar.Group>
 
  <Separator.Root class="-my-1 mx-1 w-[1px] self-stretch bg-dark-10" />
 
  <div class="flex items-center">
    <Toolbar.Button
      class="inline-flex items-center justify-center rounded-9px px-3 py-2 text-sm  font-medium text-foreground/80 transition-all hover:bg-muted active:scale-98 active:bg-dark-10"
    >
      <Sparkle class="mr-2 sq-6" />
      <span> Ask AI </span>
    </Toolbar.Button>
  </div>
</Toolbar.Root>

	<script lang="ts">
  import { Separator, Toolbar } from "$lib";
  import {
    TextB,
    TextItalic,
    TextStrikethrough,
    TextAlignLeft,
    TextAlignCenter,
    TextAlignRight,
    Sparkle
  } from "phosphor-svelte";
 
  let text: string[] | undefined = ["bold"];
  let align: string | undefined;
</script>
 
<Toolbar.Root
  class="flex h-12 min-w-max items-center justify-center rounded-10px border border-border bg-background p-1 shadow-mini"
>
  <Toolbar.Group
    bind:value={text}
    type="multiple"
    class="flex items-center gap-x-0.5"
  >
    <Toolbar.GroupItem
      aria-label="toggle bold"
      value="bold"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextB class="sq-6" />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem
      aria-label="toggle italic"
      value="italic"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextItalic class="sq-6" />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem
      aria-label="toggle strikethrough"
      value="strikethrough"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextStrikethrough class="sq-6" />
    </Toolbar.GroupItem>
  </Toolbar.Group>
 
  <Separator.Root class="-my-1 mx-1 w-[1px] self-stretch bg-dark-10" />
 
  <Toolbar.Group
    bind:value={align}
    type="single"
    class="flex items-center gap-x-0.5"
  >
    <Toolbar.GroupItem
      aria-label="align left"
      value="left"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextAlignLeft class="sq-6" />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem
      aria-label="align center"
      value="center"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextAlignCenter class="sq-6" />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem
      aria-label="align right"
      value="right"
      class="inline-flex items-center justify-center rounded-9px bg-background text-foreground/60 transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10"
    >
      <TextAlignRight class="sq-6" />
    </Toolbar.GroupItem>
  </Toolbar.Group>
 
  <Separator.Root class="-my-1 mx-1 w-[1px] self-stretch bg-dark-10" />
 
  <div class="flex items-center">
    <Toolbar.Button
      class="inline-flex items-center justify-center rounded-9px px-3 py-2 text-sm  font-medium text-foreground/80 transition-all hover:bg-muted active:scale-98 active:bg-dark-10"
    >
      <Sparkle class="mr-2 sq-6" />
      <span> Ask AI </span>
    </Toolbar.Button>
  </div>
</Toolbar.Root>

Structure

	<script lang="ts">
  import { Toolbar } from "bits-ui";
</script>
 
<Toolbar.Root>
  <Toolbar.Group>
    <Toolbar.GroupItem />
  </Toolbar.Group>
  <Toolbar.Link />
  <Toolbar.Button />
</Toolbar.Root>

	<script lang="ts">
  import { Toolbar } from "bits-ui";
</script>
 
<Toolbar.Root>
  <Toolbar.Group>
    <Toolbar.GroupItem />
  </Toolbar.Group>
  <Toolbar.Link />
  <Toolbar.Button />
</Toolbar.Root>

Component API

Toolbar.Root

The root component which contains the toolbar.

Property	Type	Description
`loop`	`boolean`	Whether or not the toolbar should loop when navigating. `Default: true`
`orientation`	`enum`	The orientation of the toolbar. `Default: horizontal`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-orientation`	`——`	The orientation of the toolbar.
`data-toolbar-root`	`——`	Present on the root element.

Toolbar.Button

A button in the toolbar.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-toolbar-button`	`——`	Present on the button element.

Toolbar.Link

A link in the toolbar.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLAnchorElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-toolbar-link`	`——`	Present on the link element.

Toolbar.Group

A group of toggle items in the toolbar.

Property	Type	Description
`value`	`union`	The value of the toggle group. If the type is multiple, this will be an array of strings, otherwise it will be a string. `Default: —— undefined`
`onValueChange`	`function`	A callback function called when the value changes. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the switch is disabled. `Default: false`
`type`	`enum`	The type of toggle group. `Default: single`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-toolbar-group`	`——`	Present on the group element.

Toolbar.GroupItem

A toggle item in the toolbar toggle group.

Property	Type	Description
`value`	`string`	The value of the toolbar toggle group item. When the toolbar toggle group item is selected, toolbar the toggle group's value will be set to this value if in single mode, or this value will be pushed to the toggle group's array value if in multiple mode. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the item is disabled. `Default: false`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	Whether the toolbar toggle item is in the on or off state.
`data-value`	`——`	The value of the toolbar toggle item.
`data-disabled`	`——`	Present when the toolbar toggle item is disabled.
`data-toolbar-item`	`——`	Present on the item element.