Forma 36

Notification

StorybookGithub
stable

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

  1. Best practices
  2. Variations
    1. Intent
    2. Position
  3. Writing guidelines

Best practices

  • 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

Variations

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

Intent

IntentNotes
SuccessUsed for positive feedback, such as when an action has been successful
ErrorUsed for negative feedback, such as when an action has failed
WarningUsed for displaying warnings, such as when an action has failed due to something that can be resolved by the user

Position

PositionNotes
TopUsed to display notifications from the top of the viewport. Use when displaying notifications at the bottom isn't possible
Bottom (default)Used to display notifications from the bottom of the viewport. This is the default position for notifications

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