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.

<Toast
    title="Fixes not applied"
    portal={false}
    duration={0}
    onPrimaryActionClick={() => {}}
    primaryActionName={"Edit bulk fix"}
    status="critical"
>
    The bulk fix you requested was not made because it would cause more errors. Please edit your bulk fix or change the codes manually.
</Toast>

Quick Use Cases

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

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.

<Banner status="critical" title="Fix before posting to batch">
    You cannot post invoice #2345 because it has an outdated application for payment. Please update all applications in this series and then try again.
</Banner>

<Banner
    status="warning"
>
    Update your existing applications for payment before adding more.
</Banner>

<Banner
    status="warning"
    title="Update the invoice"
    onPrimaryActionClick={() => {}}
    primaryActionName={"Save Invoice"}
    onSecondaryActionClick={() => {}}
    secondaryActionName={"Not Now"}
>
    Please save the invoice to reflect the changes you made to the Application for Payment.
</Banner>

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.