Notification

Notifications give immediate feedback about an action triggered or experienced by an user. They will dismiss after 6 seconds, or after being clicked.

How to use Notification

• Consider where the notification will be placed and which variation is most appropriate
• Don't confuse notifications with notes, which persist in the UI and do not dismiss
• The notifications will close themselves when the close button is clicked, or after a timeout — the default is 6 seconds.
• In some situations toasts might become outdated before they expire. In those situations you can use Notification.closeAll() to close all open toasts.
• When the use hovers (mouse overs) the toast it will stop the countdown timer and the toast will stay alive as long as the toast is being hovered.

Code examples

Basic example

<Button
  variant="secondary"
  onClick={() => Notification.success('An example notification')}
>
  Show notification
</Button>
<Button
  variant="secondary"
  onClick={() => Notification.success('An example notification')}
>
  Show notification
</Button>
Hide source

The Notification component can be configured in a number of different ways. Here is a guide to when to use certain variations.

Intent

<Stack>
  <Button
    variant="positive"
    onClick={() => Notification.success('This is a success notification')}
  >
    Show success notification
  </Button>
  <Button
    variant="negative"
    onClick={() => Notification.error('This is an error notification')}
  >
    Show error notification
  </Button>
  <Button
    variant="secondary"
    onClick={() => Notification.warning('This is a warning notification')}
  >
    Show warning notification
  </Button>
</Stack>
<Stack>
  <Button
    variant="positive"
    onClick={() => Notification.success('This is a success notification')}
  >
    Show success notification
  </Button>
  <Button
    variant="negative"
    onClick={() => Notification.error('This is an error notification')}
  >
    Show error notification
  </Button>
  <Button
    variant="secondary"
    onClick={() => Notification.warning('This is a warning notification')}
  >
    Show warning notification
  </Button>
</Stack>
Hide source

Placement

<Stack>
  <Button
    variant="secondary"
    onClick={() => {
      Notification.setPlacement('top');
      Notification.success('Notification message at top');
    }}
  >
    Show notification at top of viewport
  </Button>
  <Button
    variant="secondary"
    onClick={() => {
      Notification.setPlacement('bottom');
      Notification.success('Notification message at bottom');
    }}
  >
    Show notification at bottom of viewport
  </Button>
</Stack>
<Stack>
  <Button
    variant="secondary"
    onClick={() => {
      Notification.setPlacement('top');
      Notification.success('Notification message at top');
    }}
  >
    Show notification at top of viewport
  </Button>
  <Button
    variant="secondary"
    onClick={() => {
      Notification.setPlacement('bottom');
      Notification.success('Notification message at bottom');
    }}
  >
    Show notification at bottom of viewport
  </Button>
</Stack>
Hide source

API

Notification.success('text of notification');
Notification.error('text of notification');
Notification.warning('text of notification');

// closing one notification
const notification = await Notification.success('hello');
Notification.close(notification.id);

// closing all
Notification.closeAll();

// change placement (default is bottom and offset is 20)
Notification.setPlacement('top', { offset: 100 });
Notification.setPlacement('bottom', { offset: 0 });

// change duration of expiration (default is 6000ms)
Notification.setDuration(1000); // 1 second
Notification.setDuration(100000); // 100 seconds

Content guidelines

• Use clear and succinct copy, since the notification will only be available for 6 seconds
• Use active voice, present tense, and consider tone of voice depending on the circumstance
• Use sentence style caps (in which only the first word of a sentence or term is capitalized)