Skip to main content

Alerts

Alerts provide contextual information about system status that persists until dismissed or resolved.

Specifications

  • Container (Height: 56px; Radius: 2px; background-color: white; 1px border, 8px indicator line same color as border on the left; Padding: 16px; Margin: 16px) required
  • Alert text (Font: Open Sans Bold 14px) required
  • Leading Non-Interactive Icon/ Charm (16x16px) optional
  • Button (text only, right aligned) or trailing close icon (16px16px) optional
  • Link (underlined, only one per alert) optional



Alerts

  • Appear on top of the main content container.
  • Stretch horizontally to fill 100% of the container they are placed in.
    • Always follow typography line length guidelines when displaying alerts. Pair with another component, like a Form, or place in a fixed-width container to ensure alerts don’t get too wide.
  • Push other content down to make room for an alert on a page.
  • Can include tint to add extra emphasis or to increase contrast with page content. When changing background color, make sure the text and icons pass contrast ratio requirements.
  • Do not have a shadow.
  • Remain on the page until dismissed.

Examples

Colors

Element Property Color
Primary Color Trimble Blue
#0063a3
#ffffff
Background White
#ffffff
#0063a380
Border Trimble Blue
#0063a3
#019aeb
Secondary Color Gray 6
#6a6e79
#ffffff
Background White
#ffffff
#6a6e7980
Border Gray 8
#464b52
#6a6e79
Dark Color Trimble Gray
#252a2e
#ffffff
Background White
#ffffff
#171c1e80
Border Trimble Gray
#252a2e
#464b52
Success Color Green Dark
#006638
#ffffff
Background White
#ffffff
#1e8a4480
Border Green Dark
#006638
#1e8a44
Danger Color Red
#da212c
#ffffff
Background White
#ffffff
#da212c80
Border Red
#da212c
#da212c
Warning Color Trimble Gray
#252a2e
#ffffff
Background White
#ffffff
#fbad2680
Border Yellow Dark
#e49325
#fbad26

Behaviors

  • When applicable, dismiss by clicking the close icon.
  • When dismissed or resolved, alerts slide up and fade out, relinquishing their space.

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 and whether they need to act to successfully keep moving through a task. Warning alerts might tell a user what could happen if they don’t address what they’re being warned about.
  • For messages, use full sentences with punctuation. Use sentence case.
  • Unordered lists offer a structured format to present:
    • Items needing resolution
    • Guidelines to successful completion
    • Ways to resolve problems