Skip to main content

Toasts

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

Specifications

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.

Behaviors

  • When applicable, dismiss by clicking the close icon.
  • Toasts fade out automatically after 15 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
Last updated September 27, 2024.