Skip to main content

Toolbar

Toolbar

Dark control strip for search, filters, grouping and view toggles under a page header

Tags: component layout toolbar

View Demo

Toolbar is the dark strip that sits under a page header and holds list controls: a search input, a filled "Filters" button, the result count, a SegmentedControl for grouping and a ViewToggle for switching views. Filled secondary buttons inside it automatically pick up the toolbar's light border.

Import​

<script>
  import { Toolbar, SegmentedControl, ViewToggle } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  import {
    Toolbar,
    SegmentedControl,
    ViewToggle,
    Button,
    Input,
    Separator,
  } from '@classic-homes/theme-svelte';

  let groupBy = $state('community');
  let view = $state('list');
</script>

<Toolbar label="Inventory tools">
  <Input placeholder="Search homes, communities, floor plans…" class="max-w-sm" />
  <Button variant="secondary" size="sm">Filters</Button>
  <span class="text-sm">89 homes</span>

  {#snippet end()}
    <SegmentedControl
      label="Group homes by"
      size="sm"
      bind:value={groupBy}
      options={[
        { value: 'community', label: 'Community' },
        { value: 'collection', label: 'Collection' },
        { value: 'floor-plan', label: 'Floor Plan' },
      ]}
    />
    <Separator orientation="vertical" class="h-6 bg-secondary-soft" />
    <ViewToggle bind:value={view} />
  {/snippet}
</Toolbar>

Props​

Prop Type Default Description
label string required Accessible name of the group (required)
children Snippet - Leading controls (search, filters, count)
end Snippet - Right-aligned cluster (grouping control, view toggle)
class string - Additional classes

Styling​

  • Background bg-toolbar (#1b373b), text text-toolbar-foreground.
  • Sets --secondary-border to --toolbar-border so Button variant="secondary" renders with the light sage ring the design calls for on the dark strip. No other control colors are overridden.
  • Use Separator orientation="vertical" class="h-6 bg-secondary-soft" for the dividing pipe between control groups.

Accessibility​

  • Renders a labelled role="group"; Tab moves between the controls inside it.
  • It is intentionally not an ARIA toolbar: SegmentedControl and ViewToggle own their own arrow-key navigation, and a text input inside the strip would conflict with toolbar-level arrow handling.
  • Text on the strip is white on #1b373b (12.7:1).
On this page