---
name: Viewport Action Bar
menu: Data Display
route: components/viewportActionBar
---

import { Playground, Props } from 'docz';
import { ViewportActionBar } from '@ohif/ui';

# Viewport Action Bar

Used to display an Action Bar in the viewer.

## Import

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

## Basic usage

<Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
      onSeriesChange={(direction) => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: true,
        isLocked: false,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
        modality: 'CT',
        patientInformation: {
          patientName: 'Smith, Jane',
          patientSex: 'F',
          patientAge: '59',
          MRN: '10000001',
          thickness: '2.0mm',
          spacing: '1.25mm',
          scanner: 'Aquilion',
        },
      }}
    />
  </div>
</Playground>

<Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
      onSeriesChange={(direction) => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: false,
        isLocked: true,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
        modality: 'CT',
        patientInformation: {
          patientName: 'Smith, Jane',
          patientSex: 'F',
          patientAge: '59',
          MRN: '10000001',
          thickness: '2.0mm',
          spacing: '1.25mm',
          scanner: 'Aquilion',
        },
      }}
    />
  </div>
</Playground>

<Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
      onSeriesChange={(direction) => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: false,
        isLocked: false,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
        modality: 'SR',
        patientInformation: {
          patientName: 'Smith, Jane',
          patientSex: 'F',
          patientAge: '59',
          MRN: '10000001',
          thickness: '2.0mm',
          spacing: '1.25mm',
          scanner: 'Aquilion',
        },
      }}
    />
  </div>
</Playground>

<Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
      onSeriesChange={(direction) => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: false,
        isLocked: true,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
        modality: 'SR',
        patientInformation: {
          patientName: 'Smith, Jane',
          patientSex: 'F',
          patientAge: '59',
          MRN: '10000001',
          thickness: '2.0mm',
          spacing: '1.25mm',
          scanner: 'Aquilion',
        },
      }}
    />
  </div>
</Playground>

## Properties

<Props of={ViewportActionBar} />
