Toolbar

The toolbar component provides a way to group related elements together, such as buttons.

It handles keyboard navigation for screen reader users, and provides a way to navigate between the elements in the toolbar.

WAI-ARIA: Toolbar Pattern

Example

Sources

+page.svelte

<script lang="ts">
  import {
    Bold,
    Italic,
    Strikethrough,
    AlignLeft,
    AlignCenter,
    AlignRight,
    Link,
    Image,
  } from 'lucide-svelte'
  import Toolbar from './Toolbar.svelte'
  import Button from './Button.svelte'
  import Separator from './Separator.svelte'
</script>

<Toolbar>
  <Button>
    <Bold class="h-4 w-4" />
  </Button>
  <Button>
    <Italic class="h-4 w-4" />
  </Button>
  <Button>
    <Strikethrough class="h-4 w-4" />
  </Button>
  <Separator />
  <Button>
    <AlignLeft class="h-4 w-4" />
  </Button>
  <Button>
    <AlignCenter class="h-4 w-4" />
  </Button>
  <Button>
    <AlignRight class="h-4 w-4" />
  </Button>
  <Separator />
  <Button>
    <Link class="h-4 w-4" />
  </Button>
  <Button>
    <Image class="h-4 w-4" />
  </Button>
</Toolbar>

Button.svelte

<script lang="ts">
  import { createKey, type Toolbar } from 'louisette'
  import { getContext } from 'svelte'

  // Generate a unique key for this item
  const key = createKey()

  const { itemAttrs } = getContext<Toolbar>('toolbar')
</script>

<button
  {...$itemAttrs(key)}
  class="rounded p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800"
  on:click
  {...$$restProps}
>
  <slot />
</button>

Separator.svelte

<div
  role="separator"
  class="my-1 border-l border-neutral-200 dark:border-neutral-800"
/>

Toolbar.svelte

<script lang="ts">
  import { createToolbar } from 'louisette'
  import { setContext } from 'svelte'

  const { toolbarAttrs, ...toolbarContext } = createToolbar()
  setContext('toolbar', toolbarContext)
</script>

<div
  {...$toolbarAttrs}
  class="flex gap-2 rounded bg-white p-2 shadow dark:bg-neutral-900 dark:text-white"
>
  <slot />
</div>