---
name: Toolbar
menu: Data Display
route: components/toolbar
---

import { useState } from 'react';
import { Playground, Props } from 'docz';
import classnames from 'classnames';
import { Toolbar, Typography } from '@ohif/ui';

# Toolbar

A Toolbar is used to create a list of tools.

## Import

```javascript
import { Toolbar } from '@ohif/ui';
```

<Playground>
  {() => {
    const [activeTool, setActiveTool] = useState('Zoom');
    const dropdownContent = [
      {
        name: 'Soft tissue',
        value: '400/40',
      },
      { name: 'Lung', value: '1500 / -600' },
      { name: 'Liver', value: '150 / 90' },
      { name: 'Bone', value: '2500 / 480' },
      { name: 'Brain', value: '80 / 40' },
    ];
    const tools = [
      {
        id: 'Zoom',
        label: 'Zoom',
        icon: 'tool-zoom',
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Zoom' },
        onClick: () => setActiveTool('Zoom'),
      },
      {
        id: 'Wwwc',
        label: 'Levels',
        icon: 'tool-window-level',
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Wwwc' },
        onClick: () => setActiveTool('Wwwc'),
        dropdownContent: (
          <div>
            {dropdownContent.map((row, i) => (
              <div
                key={i}
                className="flex justify-between py-2 px-3 hover:bg-secondary-dark cursor-pointer"
              >
                <div>
                  <span className="text-base text-white">{row.name}</span>
                  <span className="text-base text-primary-light ml-3">
                    {row.value}
                  </span>
                </div>
                <span className="text-base text-primary-active ml-4">{i}</span>
              </div>
            ))}
          </div>
        ),
      },
      {
        id: 'Pan',
        label: 'Pan',
        icon: 'tool-move',
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Pan' },
        onClick: () => setActiveTool('Pan'),
      },
      {
        id: 'Capture',
        label: 'Capture',
        icon: 'tool-capture',
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Capture' },
        onClick: () => setActiveTool('Capture'),
      },
      {
        id: 'Layout',
        label: 'Layout',
        icon: 'tool-layout',
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Layout' },
        onClick: () => setActiveTool('Layout'),
      },
    ];
    const moreTools = [
      {
        id: 'Zoom 2',
        label: 'Zoom',
        icon: 'tool-zoom',
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Zoom' },
        onClick: () => setActiveTool('Zoom 2'),
      },
      {
        id: 'Layout 2',
        label: 'Layout',
        icon: 'tool-layout',
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Layout' },
        onClick: () => setActiveTool('Layout 2'),
      },
    ];
    const secondaryTools = [
      {
        id: 'Annotate',
        label: 'Annotate',
        icon: 'tool-annotate',
        type: null,
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Annotate' },
        onClick: () => console.log('Activate Annotate'),
      },
      {
        id: 'Bidirectional',
        label: 'Bidirectional',
        icon: 'tool-bidirectional',
        type: null,
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Bidirectional' },
        onClick: () => console.log('Activate Bidirectional'),
      },
      {
        id: 'Elipse',
        label: 'Elipse',
        icon: 'tool-elipse',
        type: null,
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Elipse' },
        onClick: () => console.log('Activate Elipse'),
      },
      {
        id: 'Length',
        label: 'Length',
        icon: 'tool-length',
        type: null,
        commandName: 'setToolActive',
        commandOptions: { toolName: 'Length' },
        onClick: () => console.log('Activate Length'),
      },
    ];
    return (
      <div className="py-10 px-4 flex flex-col justify-center">
        <div className="mb-4">
          <Typography className="mb-2">Primary Toolbar</Typography>
          <Toolbar
            moreTools={moreTools}
            activeTool={activeTool}
            tools={tools}
          />
        </div>
        <div>
          <Typography className="mb-2">Secondary Toolbar</Typography>
          <Toolbar tools={secondaryTools} type="secondary" />
        </div>
      </div>
    );
  }}
</Playground>

## Properties

<Props of={Toolbar} />
