Toasts

• Usage
• Styles
• Accessibility

Specifications

• Container (Height: 42px; 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

• 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

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.

Colors