Overview

Alerts represent highlighted messages on a page that call out important information. Alerts can be used both inline with page content as well as a subheader as a status for the entire page.

Best Practices

Alerts should:

  • Be brief
  • Be positioned in consistent locations
  • Not wrap headline text. For maximum legibility, use the tagline property for additional information

Alerts should not:

  • Be used too often. They are meant to highlight important information and will be drowned out if used too frequently on a single page.

Content guidelines

Alerts should communicate a clear message to highlight to customers. Emphasize the action within the headline, and save the tagline for further explanation or additional information.

Examples

Success Alert

Success alerts are used to highlight information that was generated by a successful / confirmed action.

Code example
Playroom
success-icon
Success or positive messages
Should be used sparingly.

Error Alert

Error alerts are used to highlight information that was generated by an unsuccessful action or error that needs to be remedied.

Code example
Playroom

Warning Alert

Warning alerts are used to highlight information that was generated by a warning or caution the user to proceed carefully going forward.

Code example
Playroom
warning-icon
Warning tips for customers
Proceed with caution.

Info Alert

Info alerts are used to highlight general information and provide more context for the surrounding content.

Code example
Playroom
info-icon
Informational tips for customers
Here is something you should know.

Tip Alert

Tip alerts are used to highlight tips and other helpful information or materials.

Code example
Playroom
tip-icon
Tips for customers
Helpful tips for you to remember.

Marketing Alert

Marketing alerts are used to highlight product marketing information or materials.

Code example
Playroom
marketing-icon
Marketing messages for ezOrdering
Learn more about our products.

Alert without a tagline

Alerts do not require content and can be rendered with just a headline.

Code example
Playroom
info-icon
I'm just a headline

Directional Alerts

Alerts can be tied to other content via a directional speech bubble arrow either above or below content.

Code example
Playroom
warning-icon
Watch out!
I'm above some content.
Some content.
More content.
success-icon
Great job!
We got below more content.