patterns / null

Errors & Warnings

Getting Started

When writing an error or warning message, consider these questions:

  • What is the issue?
    • Knowing what the issue is (or knowing that we don't know) can help frame what to communicate to the user.
  • What is the cause of the issue?
    • Common reasons could be user action, server/network issues, or not being able to find a resource.
  • What can the user do to resolve the issue?
    • If it's the app fault, explain that. If it's user error, can you identify the most likely cause?
  • Is there a path a user can take to resolve the issue?
    • Whenever it is possible for a user to take action on the issue, a path should be given. For example, if using a Banner or Toast, provide a call to action in them.

Quick Use Cases

Each of these is explained in more detail. For needing a component quickly, consider these common scenarios.

Use Case
Component(s) to use
Page level error or warning has occurred
Form validation errors
Inline Error Text inside a Form, a Banner as a summary
Background process problem
No results
Server/Network error
Application wide error or warning

Types of Errors and Warnings

Page-level Messages

This error type is used when an error applies to the entire page. They are represented as Banners, placed at the bottom of the Page Header.

They can be used to:

  • Summarize individual errors found on the rest of the page.
  • Inform the user of important, but non-critical information about the page.

Copy Elements

  • Bolded Headline (optional)
  • Sentence explanation & next step
  • 1-2 CTAs can be buttons or links (optional)

Copy Rules

  • Headline should be title case if two words or less, otherwise sentence case
  • Sentence(s) should be action focused, active voice, and include next steps for user to take. No links in body
  • CTAs should be title case for two words or less, sentence case for more

Form Errors and Validation

Form errors are among the most common type of errors. Each individual component page provides specific styling and text location. It is recommended to also use a Banner as a summary when multiple errors exist.

Validating on submit

This validation occurs after a user has hit a save or submit button. These errors are paired with Banners and individual form field errors.