---
name: Notification
menu: Feedback
route: components/notification
---

import { Playground, Props } from 'docz';
import { Notification } from '../';

# Notification

A notification displays a short message in a way that attracts the user's
attention without interrupting the user's task.

## Import

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

## Basic usage

<Playground>
  {() => {
    return (
      <div className="p-4 w-full lg:w-2/3">
        <Notification
          message="Track all measurement for this series?"
          type="info"
          actions={[
            {
              type: 'cancel',
              text: 'No',
              value: 0,
            },
            {
              type: 'secondary',
              text: 'No, do not ask again',
              value: -1,
            },
            {
              type: 'primary',
              text: 'Yes',
              value: 1,
            },
          ]}
          onSubmit={value => {
            window.alert(value);
          }}
        />
      </div>
    );
  }}
</Playground>

## Properties

<Props of={Notification} />
