# Toolbar

> Row of filters/controls above a table or grid.

Source: https://ui.jcsoftdev.com/docs/components/toolbar

Row of filters/controls above a table or grid.

## Import

```ts
import { Toolbar } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/toolbar`.

## Usage

```tsx
<Toolbar>
  <>
          <Button size="sm" variant="secondary">
            Todos los barberos
          </Button>
          <Button size="sm" variant="ghost">
            Hoy
          </Button>
          <ToolbarRight>
            <Chip tone="neutral">12 citas</Chip>
            <Button size="sm">Nueva cita</Button>
          </ToolbarRight>
        </>
</Toolbar>
```

## Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-toolbar--default)
- [Filters Only](/storybook/?path=/story/containers-toolbar--filters-only)
- [Narrow](/storybook/?path=/story/containers-toolbar--narrow)

## Source

`packages/ui/src/containers/toolbar/toolbar.tsx`