Skip to main content

Toasts

Toasts provide non-intrusive, short-lasting contextual feedback to the user.

Specifications

  • Container (Height: 40px; Radius: 2px; Padding: 16px; Margin: 16px; solid color; no border; level 3 shadow) required
  • Toast text (Font: Open Sans Semibold 14px) required
  • Leading non-interactive icon (16x16px) optional
  • Trailing close icon (16x16px) or a Text Only Button optional

Toasts

Toast

  • Appear on the bottom, relative to the bottom edge of the browser/ device.
  • Fill as much horizontal space as needed.
  • Float above the content.
  • Fade out automatically after some some.
  • Can sometimes be dismissed with a close icon.
  • Cannot include links.

Basic Toasts

Toasts

Behaviors

  • When applicable, dismiss by clicking the close icon.
  • Toasts fade out automatically after 30 seconds.

Editorial

  • Keep titles three to five words if possible.
  • For titles, use title case and capitalize prepositions of four letters or more.
  • Messages should tell the user what’s happening in friendly, non-technical language.
  • If the message requires a user to take action in order to continue or complete a task, use an Alert instead.
  • For messages, use full sentences with punctuation. Use sentence case.
Last updated May 18, 2023.