<script lang="ts">
  import ArrowClockwiseIcon from "phosphor-svelte/lib/ArrowClockwiseIcon";
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import TrashIcon from "phosphor-svelte/lib/TrashIcon";
  import * as Toolbar from "kumo-svelte/components/toolbar";
</script>

<Toolbar.Root aria-label="Resource actions">
  <Toolbar.Button icon={PlusIcon}>Create</Toolbar.Button>
  <Toolbar.Button icon={ArrowClockwiseIcon}>Refresh</Toolbar.Button>
  <Toolbar.Button icon={TrashIcon} aria-label="Delete" />
</Toolbar.Root>

Import

import * as Toolbar from "kumo-svelte/components/toolbar";

Usage

<script lang="ts">
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import * as Toolbar from "kumo-svelte/components/toolbar";
</script>

<Toolbar.Root aria-label="Resource actions">
  <Toolbar.Button icon={PlusIcon}>Create</Toolbar.Button>
  <Toolbar.Button>Refresh</Toolbar.Button>
</Toolbar.Root>

Examples

Actions

Use Toolbar.Button for related actions that should read as one grouped control.

<script lang="ts">
  import ArrowClockwiseIcon from "phosphor-svelte/lib/ArrowClockwiseIcon";
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import TrashIcon from "phosphor-svelte/lib/TrashIcon";
  import * as Toolbar from "kumo-svelte/components/toolbar";
</script>

<Toolbar.Root aria-label="Resource actions">
  <Toolbar.Button icon={PlusIcon}>Create</Toolbar.Button>
  <Toolbar.Button icon={ArrowClockwiseIcon}>Refresh</Toolbar.Button>
  <Toolbar.Button icon={TrashIcon} aria-label="Delete" />
</Toolbar.Root>

Search

Use Toolbar.Input for a plain text input or Toolbar.InputGroup when the field needs addons, icons, or inline buttons.

<script lang="ts">
  import MagnifyingGlassIcon from "phosphor-svelte/lib/MagnifyingGlassIcon";
  import XIcon from "phosphor-svelte/lib/XIcon";
  import * as InputGroup from "kumo-svelte/components/input-group";
  import * as Toolbar from "kumo-svelte/components/toolbar";

  let query = $state("workers");
</script>

<Toolbar.Root aria-label="Search toolbar" class="w-full max-w-md">
  <Toolbar.InputGroup aria-label="Search resources" class="flex-1">
    <InputGroup.Addon>
      <MagnifyingGlassIcon />
    </InputGroup.Addon>
    <InputGroup.Input bind:value={query} placeholder="Search resources" aria-label="Search resources" />
    {#if query}
      <InputGroup.Addon align="end" containsButton>
        <InputGroup.Button
          aria-label="Clear search"
          onclick={() => {
            query = "";
          }}
        >
          <XIcon />
        </InputGroup.Button>
      </InputGroup.Addon>
    {/if}
  </Toolbar.InputGroup>
  <Toolbar.Button>Search</Toolbar.Button>
</Toolbar.Root>

Sizes

The toolbar size flows to nested buttons, inputs, and input groups.

<script lang="ts">
  import GearIcon from "phosphor-svelte/lib/GearIcon";
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import * as Toolbar from "kumo-svelte/components/toolbar";
  import type { ToolbarSize } from "kumo-svelte/components/toolbar";

  const sizes: ToolbarSize[] = ["xs", "sm", "base", "lg"];
</script>

<div class="flex flex-col items-start gap-4">
  {#each sizes as size}
    <Toolbar.Root aria-label={`${size} toolbar`} {size}>
      <Toolbar.Button icon={PlusIcon}>Create</Toolbar.Button>
      <Toolbar.Button icon={GearIcon} aria-label="Settings" />
    </Toolbar.Root>
  {/each}
</div>

Focusable Disabled Controls

Set focusableWhenDisabled when disabled toolbar controls should stay reachable for tooltip or status context. The control receives aria-disabled and suppresses activation.

<script lang="ts">
  import ArrowClockwiseIcon from "phosphor-svelte/lib/ArrowClockwiseIcon";
  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
  import * as Toolbar from "kumo-svelte/components/toolbar";
</script>

<Toolbar.Root aria-label="Disabled toolbar controls">
  <Toolbar.Button icon={PlusIcon}>Create</Toolbar.Button>
  <Toolbar.Button icon={ArrowClockwiseIcon} disabled focusableWhenDisabled>
    Syncing
  </Toolbar.Button>
  <Toolbar.Input value="Read-only filter" disabled focusableWhenDisabled aria-label="Filter" />
</Toolbar.Root>

API Reference

Prop	Type	Default
children*	`Snippet`	—
class	`string`	—
size	`ToolbarSize`	`KUMO_TOOLBAR_DEFAULT_VARIANTS.size`

Prop	Type	Default
children	`Snippet`	—
class	`string`	—
focusableWhenDisabled	`boolean`	`false`
icon	`Component`	—
loading	`boolean`	`false`
shape	`KumoButtonShape`	—

Prop	Type	Default
focusableWhenDisabled	`boolean`	`false`

No component-specific props. This component accepts child content or standard forwarded attributes.

Accessibility

Toolbar renders with role="toolbar" by default. Provide aria-label when the toolbar does not have a visible label.
Arrow keys move focus between controls. Home and End move to the first and last focusable control.
Text editing controls keep their native arrow-key behavior.
Use aria-orientation="vertical" for vertical toolbars so up/down arrows move focus.
Icon-only buttons need an aria-label.