Toolbar - Kumo Svelte

<script lang="ts">
  import { FunnelSimple, Gear, MagnifyingGlass } from 'phosphor-svelte';
  import { InputGroup, Toolbar } from 'kumo-svelte';
</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.Input, and Toolbar.InputGroup to opt supported controls into toolbar sizing, button styling, borders, and radii.

<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

Toolbar.Button, Toolbar.Input, and Toolbar.InputGroup inherit the toolbar size.
Toolbar.Button always renders with quiet toolbar button styling.
Toolbar.InputGroup passes props directly to InputGroup with the toolbar size.
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

Input Shorthand

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

<script lang="ts">
  import { FunnelSimple, Gear } from 'phosphor-svelte';
  import { Toolbar } from 'kumo-svelte';
</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, Toolbar } from 'kumo-svelte';
</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>

Sizes

The size prop supports xs, sm, base, and lg. Every supported toolbar item is locked to the same size.

base

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

  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, UploadSimple } from 'phosphor-svelte';
  import { Toolbar } from 'kumo-svelte';
</script>

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

Accessible Labels

Use aria-label for compact toolbar controls that do not have visible labels.

<script lang="ts">
  import { MagnifyingGlass } from 'phosphor-svelte';
  import { Toolbar } from 'kumo-svelte';
</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"`	Locks every toolbar item to this 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
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.