Alert
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
headlinetext. For maximum legibility, use thetaglineproperty 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.
Error Alert
Error alerts are used to highlight information that was generated by an unsuccessful action or error that needs to be remedied.
Warning Alert
Warning alerts are used to highlight information that was generated by a warning or caution the user to proceed carefully going forward.
Info Alert
Info alerts are used to highlight general information and provide more context for the surrounding content.
Tip Alert
Tip alerts are used to highlight tips and other helpful information or materials.
Marketing Alert
Marketing alerts are used to highlight product marketing information or materials.
Alert without a tagline
Alerts do not require content and can be rendered with just a headline.
Directional Alerts
Alerts can be tied to other content via a directional speech bubble arrow either above or below content.