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