import { Meta } from '@storybook/addon-docs/blocks'

<Meta title="Guide|Errors" />


# Errors

Error messages are an indication of system status. They let users know that they have encountered a problem and provide ways to resolve it, teaching them to avoid future impediments.

### Scenarios

Error messages can be used in the following scenarios:

- Panic state,
- Errors in the system or on a view (banners)
- Errors in forms: see error messages and states in form validation (see Forms)

**Panic state**

The panic state is shown when the whole system is not working and it's a very serious error. It has no action since the system is not working except for a description and a contact to support. They are full page overlays that cover the whole layout.

**Banners error**

These errors are connected to the context of the content and are used to display system messages. The messages are short and straightforward. It may contain a dismiss button, and an action button depending on the situation.

The error toast has always an action to perform on it in order to disappear. It does not disappear automatically.

### Do's

- Stack error messages if more than one are displayed on the screen at once.
- Add an additional action button if appropriate.
- Always show a dismiss button.
- Avoid using for irreversible actions.
- Avoid using more than 2 lines of text for the toast message.

### Dont's

- Dismiss a error message prematurely if another toast is introduced.
- Add more than one extra button in addition to the “Dismiss” button.
- Remove a user’s ability to manually dismiss the message.
- Use for actions that will result in permanent deletion.
- Use toast messages for messages that are longer than 3 lines of text.