Toolbar - Kumo Svelte

<script lang="ts">
  import FunnelSimple from 'phosphor-svelte/lib/FunnelSimple';
  import Gear from 'phosphor-svelte/lib/Gear';
  import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
  import { InputGroup } from 'kumo-svelte/components/input-group';
  import { Toolbar } from 'kumo-svelte/components/toolbar';
</script>

<Toolbar class="w-full max-w-md">
  <Toolbar.InputGroup aria-label="Search DNS records" class="flex-1">
    <InputGroup.Addon>
      <MagnifyingGlass />
    </InputGroup.Addon>
    <InputGroup.Input placeholder="Search DNS records" />
  </Toolbar.InputGroup>
  <Toolbar.Button icon={FunnelSimple} aria-label="Filter" />
  <Toolbar.Button icon={Gear} aria-label="Settings" />
</Toolbar>

Installation

Barrel

import { Toolbar } from "kumo-svelte";

Granular

import { Toolbar } from "kumo-svelte/components/toolbar";

Usage

Use Toolbar when multiple controls should read as one compact toolbar or filter card. Use Toolbar.Button, Toolbar.Link, Toolbar.Input, and Toolbar.InputGroup to opt supported controls into toolbar sizing, button styling, borders, and radii. Compose Select and Combobox triggers with those controls through Svelte child snippets.

<script lang="ts">  import { FunnelSimple, MagnifyingGlass } from 'phosphor-svelte';  import { InputGroup, Toolbar } from 'kumo-svelte';</script><Toolbar>  <Toolbar.InputGroup aria-label="Search DNS records">    <InputGroup.Addon>      <MagnifyingGlass />    </InputGroup.Addon>    <InputGroup.Input placeholder="Search DNS records" />  </Toolbar.InputGroup>  <Toolbar.Button icon={FunnelSimple} aria-label="Filter" /></Toolbar>

Behavior

Every Toolbar.* control uses the base size by default.
The Toolbar size prop remains available for compatibility but is deprecated; omit it for the base size.
Toolbar.Button always renders with quiet toolbar button styling.
Toolbar.Link renders a LinkButton with quiet toolbar styling and participates in arrow-key navigation.
Toolbar.InputGroup passes props directly to InputGroup with the toolbar size.
Render Toolbar.Button from Select's trigger snippet to compose a select trigger.
Render Toolbar.Input from Combobox.TriggerInput's child snippet for an editable combobox.
Select and Combobox keep their popup, filtering, and value behavior while joining toolbar arrow-key navigation.
Adjacent toolbar items share borders and only the outer corners are rounded.
Direct Toolbar children that are not one of the supported toolbar item components do not receive toolbar overrides.

Examples

Select

Select keeps its regular root props. Its trigger snippet receives the Bits UI trigger props and current display value, so rendering Toolbar.Button makes the trigger a toolbar item without replacing Select behavior.

<script lang="ts">
  import FunnelSimple from 'phosphor-svelte/lib/FunnelSimple';
  import GearSix from 'phosphor-svelte/lib/GearSix';
  import { Select } from 'kumo-svelte/components/select';
  import { Toolbar } from 'kumo-svelte/components/toolbar';
</script>

<Toolbar>
  <Toolbar.Button icon={FunnelSimple}>Filter</Toolbar.Button>
  <Select
    aria-label="Sort records"
    value="name"
    items={{ name: 'Name', created: 'Created date', status: 'Status' }}
  >
    {#snippet trigger({ props, value })}
      <Toolbar.Button {...props}>{value}</Toolbar.Button>
    {/snippet}
  </Select>
  <Toolbar.Button icon={GearSix} aria-label="View settings" />
</Toolbar>

Combobox

Compose an editable Combobox trigger with Toolbar.Input. For a non-editable value trigger, render Toolbar.Button from Combobox.TriggerValue's child snippet. While a popup is open, arrow keys continue to navigate its options.

<script lang="ts">
  import FunnelSimple from 'phosphor-svelte/lib/FunnelSimple';
  import { Combobox } from 'kumo-svelte/components/combobox';
  import { Toolbar } from 'kumo-svelte/components/toolbar';

  const items = ['All records', 'Active', 'Paused', 'Failed'];
</script>

<Toolbar class="w-full max-w-md">
  <Toolbar.Button icon={FunnelSimple}>Status</Toolbar.Button>
  <Combobox {items}>
    <Combobox.TriggerInput aria-label="Filter status" class="flex-1" placeholder="Filter status…">
      {#snippet child({ props })}
        <Toolbar.Input {...props} />
      {/snippet}
    </Combobox.TriggerInput>
    <Combobox.Content>
      <Combobox.List>
        {#snippet children(item)}
          <Combobox.Item value={item}>{item}</Combobox.Item>
        {/snippet}
      </Combobox.List>
      <Combobox.Empty>No matching statuses.</Combobox.Empty>
    </Combobox.Content>
  </Combobox>
</Toolbar>

Input Shorthand

Use Toolbar.Input for simple text inputs that do not need addons.

<script lang="ts">
  import FunnelSimple from 'phosphor-svelte/lib/FunnelSimple';
  import Gear from 'phosphor-svelte/lib/Gear';
  import { Toolbar } from 'kumo-svelte/components/toolbar';
</script>

<Toolbar class="w-full max-w-md">
  <Toolbar.Input aria-label="Search DNS records" placeholder="Search DNS records" class="flex-1" />
  <Toolbar.Button icon={FunnelSimple} aria-label="Filter" />
  <Toolbar.Button icon={Gear} aria-label="Settings" />
</Toolbar>

Input Group

Use Toolbar.InputGroup when one toolbar item needs its own inline addon or suffix.

<script lang="ts">
  import { InputGroup } from 'kumo-svelte/components/input-group';
  import { Toolbar } from 'kumo-svelte/components/toolbar';
</script>

<Toolbar class="w-full max-w-lg">
  <Toolbar.InputGroup aria-label="Worker subdomain" class="flex-1">
    <InputGroup.Input placeholder="my-worker" />
    <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>
  </Toolbar.InputGroup>
  <Toolbar.Button>Visit</Toolbar.Button>
</Toolbar>

Deprecated Sizing

The size prop still supports xs, sm, base, and lg for compatibility, but it is deprecated. Omit it to use the default base size.

base

<script lang="ts">
  import { Toolbar } from 'kumo-svelte/components/toolbar';

  const sizes = ['xs', 'sm', 'base', 'lg'] as const;
</script>

<div class="grid gap-3">
  {#each sizes as size}
    <div class="flex items-center gap-3">
      <span class="w-10 text-sm text-kumo-subtle">{size}</span>
      <Toolbar {size} class="w-fit">
        <Toolbar.Input aria-label={`${size} search`} placeholder="Search..." />
        <Toolbar.Button>Apply</Toolbar.Button>
      </Toolbar>
    </div>
  {/each}
</div>

Button Actions

Toolbar buttons use quiet styling so grouped actions remain visually quiet and consistent.

<script lang="ts">
  import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
  import UploadSimple from 'phosphor-svelte/lib/UploadSimple';
  import { Toolbar } from 'kumo-svelte/components/toolbar';
</script>

<Toolbar>
  <Toolbar.Button icon={UploadSimple}>Upload</Toolbar.Button>
  <Toolbar.Button icon={DownloadSimple}>Download</Toolbar.Button>
</Toolbar>

Links

Use Toolbar.Link for navigation actions. It accepts LinkButton props except for size and variant, which are controlled by the Toolbar.

<script lang="ts">
  import BookOpen from 'phosphor-svelte/lib/BookOpen';
  import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
  import { Toolbar } from 'kumo-svelte/components/toolbar';
</script>

<Toolbar>
  <Toolbar.Link href="/components/button" icon={BookOpen}>Button documentation</Toolbar.Link>
  <Toolbar.Button icon={DownloadSimple}>Download</Toolbar.Button>
</Toolbar>

Accessible Labels

Use aria-label or aria-labelledby for compact toolbar controls that do not have visible labels. Editable inputs move toolbar focus only when the caret is already at the relevant text boundary.

<script lang="ts">
  import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
  import { Toolbar } from 'kumo-svelte/components/toolbar';
</script>

<Toolbar class="w-full max-w-lg">
  <Toolbar.Input aria-label="Search records" class="flex-1" placeholder="Search" />
  <Toolbar.Button icon={MagnifyingGlass} aria-label="Search" />
</Toolbar>

API Reference

Prop	Type	Default	Description
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Deprecated. Sets every toolbar item to this size; omit it for the base size.

Prop	Type	Default	Description
icon	`Component`	-	Optional icon component rendered before the label.
shape	`"base" \| "square" \| "circle"`	-	Button shape. Icon-only toolbar buttons default to square.
disabled	`boolean`	-	Disables the toolbar button.
loading	`boolean`	-	Shows a loading indicator and disables the toolbar button.

Prop	Type	Default	Description
href	`string`	-	Navigation destination.
icon	`Component`	-	Optional icon component rendered before the label.
shape	`"base" \| "square" \| "circle"`	-	Link shape. Icon-only toolbar links default to square.
external	`boolean`	-	Opens the link in a new tab with safe rel attributes.
disabled	`boolean`	-	Disables navigation and exposes disabled semantics.

Prop	Type	Default	Description
value	`string \| number`	-	Input value, bindable with `bind:value`.
onValueChange	`(value: string) => void`	-	Called when the input value changes.

Prop	Type	Default	Description
No component-specific props. Accepts standard HTML attributes.