Actions

Toolbar

Named grouping of related controls that implements the WAI-ARIA toolbar pattern with DOM-driven roving tabindex.

import { Toolbar } from '@lostgradient/cinder/toolbar';
actiongrouping
01

Overview

A named grouping of related controls that implements the WAI-ARIA toolbar pattern with roving tabindex.

Usage

svelte 
<script lang="ts">
  import Toolbar from '@lostgradient/cinder/toolbar';
  import { Button } from '@lostgradient/cinder/button';
</script>

<Toolbar aria-label="Document actions">
  <Toolbar.Group>
    <Button variant="secondary">Save</Button>
    <Button variant="secondary">Share</Button>
  </Toolbar.Group>
  <Toolbar.Spacer />
  <Toolbar.Group>
    <Button>Publish</Button>
  </Toolbar.Group>
</Toolbar>

Horizontal toolbars wrap groups by default so constrained containers do not overlap controls. Each Toolbar.Group keeps its controls together until the toolbar's narrow container query wraps controls inside the group. A named Toolbar.Group gets role="group" by default; pass an explicit role when a different semantic grouping is required.

Live preview
02

When to use

Use when
  • Rendering a row or column of related controls where the whole set should be one Tab stop and arrow keys should move between items.
  • Wrapping existing cinder controls such as Button, SegmentedControl, and NumberInput without adding toolbar-specific child APIs.
Avoid when
  • Building a static flex row of controls that should remain in ordinary Tab order — use inline, cluster, or button-group instead.
03

Examples

Basic toolbar

A named action bar that turns several controls into one Tab stop.

Vertical toolbar

Vertical orientation swaps the roving axis to Up and Down.

Toolbar with groups

Adjacent groups keep related controls together while the toolbar wraps.

Toolbar with spacer

Toolbar.Spacer pushes utility actions to the far edge.

04

Props

Props for toolbar
Name Type Default Required Bindable Description
orientation 'horizontal' | 'vertical' 'horizontal' Layout direction for roving-key ownership and vertical group separator placement.
children snippet req Controls rendered inside the toolbar.
onkeydown unknown req
onfocusin unknown req
role unknown req