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.

Input Group

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

Sizes

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

Button Actions

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

Accessible Labels

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

API Reference

Toolbar

Toolbar.Button

Toolbar.Input

Toolbar.InputGroup