Toolbar

View Source

Toolbars are used to help separate content that have a title as well as an optional helper drawer and/or section actions.

Title

Resource

Copy

Edit

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>
)

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>
)

Title

Cancel

Add Item

Resource

Copy

Edit

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>
)

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>
)

Props

titleNode

Renders a heading in the left portion of the toolbar.

helpContentstring | Node

Render help content inside of a Collapse that is triggered by an info button placed next to the title.

actionsNode | Array

Provide either a single action like a Button or Dropdown or an array of actions. Each element will be cloned with the following props: { size: 'xs', borderColor: 'primary' }.

countnumber

Adds a counter next to the title of the toolbar.

countColorstring

Controls the color of the counter.

onStatusClearRequest() => null

Used to clear a status once it has been set.

status'error' | 'success'

Renders either a saved or error badge.

Props

PreviousTabs NextWizard