Specifications
info
Title
This is an informal toast. It shows you did something, but it's not very important.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.
info
Title
This is an informal toast. It shows you did something, but it's not very important.
info
Title
This is a neutral toast. It shows that you did you did something okay.
check_circle
Title
This is a success toast. It shows that you did you did something really well.
alert
Title
This is a error toast. It shows that you did you did something not very well.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.
| Element | Property | Color |
|---|---|---|
| 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 (Success) | Color |
Trimble Gray
Gray Light
#252a2e
#f1f1f6
|
| Background |
Green
Green (10%)
#dfe9d6
#1e8a4480
| |
| Border |
Green Dark
Green
#006638
#1e8a44
|