---
title: Toolbar
category: General
summary: Toolbars are used to help separate content that have a title as well as an optional helper drawer and/or section actions.
---

```jsx live
render(
  <StackView grow={1} shrink={1} spacing={2}>
    <Toolbar
      title={<Heading level={3}>Title</Heading>}
      count={24}
      countColor="warning"
    />
    <TileView minCellWidth={24} spacing={2}>
      <Card padding={1} subdued>
        Resource
      </Card>
      <Card padding={1} subdued>
        Resource
      </Card>
      <Card padding={1} subdued>
        Resource
      </Card>
      <Card padding={1} subdued>
        Resource
      </Card>
    </TileView>
  </StackView>
)
```

```jsx live
render(
  <Card padding={2} spacing={1}>
    <Toolbar
      title="Title"
      helpContent="Toolbars need help too"
      actions={[<Button title="Cancel" />, <Button title="Add Item" />]}
    />
    <Card padding={1} subdued>
      Resource
    </Card>
  </Card>
)
```