Notification

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

Table of contents

• How to use Notifiaction
• Component variations
• Content recommendations
• Accessibility

How to use Notifiaction

• 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
  buttonType="muted"
  onClick={() => Notification.success('An example notification')}
>
  Show notification
</Button>
<Button
  buttonType="muted"
  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

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

Position

<React.Fragment>
  <Button
    buttonType="muted"
    onClick={() => {
      Notification.setPosition('top');
      Notification.success('Notification message at top');
    }}
  >
    Show notification at top of viewport
  </Button>
  <Button
    buttonType="muted"
    onClick={() => {
      Notification.setPosition('bottom');
      Notification.success('Notification message at bottom');
    }}
  >
    Show notification at bottom of viewport
  </Button>
</React.Fragment>
<React.Fragment>
  <Button
    buttonType="muted"
    onClick={() => {
      Notification.setPosition('top');
      Notification.success('Notification message at top');
    }}
  >
    Show notification at top of viewport
  </Button>
  <Button
    buttonType="muted"
    onClick={() => {
      Notification.setPosition('bottom');
      Notification.success('Notification message at bottom');
    }}
  >
    Show notification at bottom of viewport
  </Button>
</React.Fragment>
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 position (default is bottom and offset is 20)
Notification.setPosition('top', { offset: 100 });
Notification.setPosition('bottom', { offset: 0 });

// change duration of expiration (default is 6000ms)
Notification.setDuration(1000); // 1 second
Notification.setDuration(100000); // 100 seconds
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 position (default is bottom and offset is 20)
Notification.setPosition('top', { offset: 100 });
Notification.setPosition('bottom', { offset: 0 });

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

Content recommendations

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

Accessibility

Missing