Skip to Main Content

Pelican Design System icon Pelican Design System Toasts

Toasts

Toasts are a lightweight notification relaying information related to the user's actions.

Best Practices

  • Put Toasts at the top right of the screen.
  • Toasts use the same Status Colors as Alerts.
  • Status Colors only add visual cues. The content of the Toast must make the meaning obvious to assistive technology users.
  • Toasts are only triggered by user actions such as saving, editing, deleting, or creating a file.
  • Use Info (Blue) to communicate informative or helpful information to users.
  • Use Success (Green) to provide feedback to the user indicating an action is successful.
  • Use Warning (Yellow) to indicate an unintended, but not dangerous, effect.
  • Use Danger (Red) to indicate an action will cause data loss, error, or other hard-to-reverse effects.
  • Use the icons provided for each Toast type.
  • Toasts may also be used to notify the user about information related to their current action.
  • Toasts are persistent regardless of scrolling.
  • Toasts are dismissable either by clicking the X to close or they automatically close after a defined time duration (suggestion is 7 seconds).

When writing Toasts, keep the following in mind:

  • Be clear and specific.
  • Use Plain Language, not technical jargon.
  • Do not blame the user.
  • Avoid negative language.
  • Avoid using all uppercase letters unless you are using Acronyms.
  • Provide useful information.
  • See Voice and Tone for more information.

Usage

See the Pen Tabbed Content by LA Gov Design Team (@lagovdesignteam) on CodePen.

Resources

Page top