Toolbar

Toolbar component used to display filtering options in a search context.

Controls

Use ToolbarControls to display controls in toolbar

import {Toolbar, ToolbarControls} from "swash/Toolbar";

() => (
    <Toolbar aria-label="Filters">
       <ToolbarControls>My filters...</ToolbarControls>
    </Toolbar>
);

Actions

Use ToolbarActions to add contextual actions in toolbar.

import { Toolbar, ToolbarControls, ToolbarActions } from "swash/Toolbar";
import {Button} from "swash/Button";

() => (
    <Toolbar aria-label="Filters">
        <ToolbarControls>
          My filters
          <ToolbarActions>
            <Button variant="secondary">Reset filters</Button>
          </ToolbarActions>
        </ToolbarControls>
      </Toolbar>
);

Drawer

Toolbar controls

import {Toolbar, ToolbarControls} from "swash/Toolbar";

const drawer = useToolbarDrawerState();
() => (
     <>
        <Toolbar aria-label="Filters">
          <ToolbarControls>
            <ToolbarDrawerToggle count={1} label="Advanced filters" {...drawer} />
          </ToolbarControls>
        </Toolbar>
        <ToolbarDrawer {...drawer} aria-label="Advanced filters">
          <ToolbarControls>Toolbar controls</ToolbarControls>
        </ToolbarDrawer>
     </>
);

ToolbarDrawer

ToolbarDrawer Is a drawer that can be opened/closed.

ToolbarDrawerToggle

ToolbarDrawerToggle Is a button that can open/close the drawer.

Props

Count (number): Number of active items in the drawer
label (string): Label for the button

useToolbarDrawerState

useToolbarDrawerState is a hook that returns the state of the drawer. You will need to spread the state to the ToolbarDrawer and ToolbarDrawerToggle component.

This state is based on Ariakit Disclosures