Specifications
- Container (Height: 42px; Radius: 2px; Padding: 16px; Margin: 16px; solid color; level 3 shadow) required
- Toast text (Font: Open Sans 14px) required
- Leading non-interactive icon (16x16px) optional
- Trailing close icon (16x16px) or a Text Only Button optional
Aww yeah, you read a toast.
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.
Aww yeah, you read a toast.
Aww yeah, you read a dark toast.
Aww yeah, you read a primary toast.
Aww yeah, you read a secondary toast.
Aww yeah, you read a danger toast.
Aww yeah, you read a warning toast.
Aww yeah, you read a success toast.
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
| Element | Property | Color |
|---|---|---|
| Toast | Color |
Trimble Gray
White
#252a2e
#ffffff
|
| Background |
White
#ffffff
rgba(241,241,246,.15)
| |
| Border |
Black (10%)
Black (10%)
rgba(0,0,0,.1)
rgba(0,0,0,.1)
| |
| Toast (Dark) | Color |
White
White
#fff
#ffffff
|
| Background |
Trimble Gray
Gray 10 (10%)
#252a2e
#171c1e80
| |
| Border |
Black (10%)
Gray 10
rgba(0,0,0,.1)
#171c1e
| |
| Toast (Primary) | Color |
Gray Light
#07599b
#f1f1f6
|
| Background |
Blue (10%)
Trimble Blue (10%)
#cfe1ee
#019aeb80
| |
| Border |
Blue
Trimble Blue
#0063a3
#019aeb
| |
| Toast (Secondary) | Color |
Trimble Gray
Gray Light
#252a2e
#f1f1f6
|
| Background |
Gray 6 (10%)
Gray 6 (10%)
#d0d0d7
#6a6e7980
| |
| Border |
Gray 6
Gray 6
#6a6e79
#6a6e79
| |
| Toast (Danger) | Color |
Trimble Gray
Gray Light
#252a2e
#f1f1f6
|
| Background |
Red (10%)
Red (10%)
#f4d1d3
#da212c80
| |
| Border |
Red Dark
Red
#da212c
#da212c
| |
| Toast (Warning) | Color |
Trimble Gray
Gray Light
#252a2e
#f1f1f6
|
| Background |
Yellow
Yellow (10%)
#fff2cc
#fbad2680
| |
| Border |
Yellow Dark
Yellow
#e49325
#fbad26
| |
| Toast (Success) | Color |
Trimble Gray
Gray Light
#252a2e
#f1f1f6
|
| Background |
Green
Green (10%)
#dfe9d6
#1e8a4480
| |
| Border |
Green Dark
Green
#006638
#1e8a44
|