This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

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

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

Intent

Placement

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