Toolbar

A container for grouping a set of buttons and controls.

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/toolbar.json

Usage

<script lang="ts">
  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
  import * as Toolbar from "$lib/components/ui/toolbar/index.js";
</script>

<Toolbar.Root aria-label="Formatting">
  <Toolbar.Group aria-label="Text style">
    <ToggleGroup.Root multiple>
      <ToggleGroup.Item value="bold">Bold</ToggleGroup.Item>
      <ToggleGroup.Item value="underline">Underline</ToggleGroup.Item>
    </ToggleGroup.Root>
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Button>Save</Toolbar.Button>
</Toolbar.Root>

API Reference

Groups controls into one roving-focus toolbar.

Groups related toolbar items.

A button in the toolbar focus sequence.

A separator perpendicular to the toolbar orientation.

A link in the toolbar focus sequence.