A system banner can be used to return feedback, display status related messages and confirmation toasts as well as loading states.
Statuses & levels
- Four types of status related banners: Error, Warning, Success and Info
- Three types of levels: App level, page level and inline
- Error: An error is considered a ‘hard stop’ which prevents the person from moving forward in their workflow until it is corrected.
- Warning: A warning is considered a ‘soft error’ which is information the person should be aware of to help prevent a future error.
- Success: Successful state only happens when it is transitioning from an error that has been resolved.
- Info: Very sparingly used but is intended for surfacing minor updates
App level banner
App level banners are short messages used to communicate a change of state at the application level. Usually, this will be used when something has gone wrong such as a service going down.
- When communicating an error, clearly explain what went wrong, ideally with a next step or an optional action
- Optional actions should not be a dismissive action, rather as an action for fixing the problem
- A dismissive icon should be included if the message is not a ‘hard stop’ and the person can continue with their task.
Card level banner
Card level banners behave similar to an app level banner except they occur at the card level and are placed below the card title. Usually, this will be used when something has gone wrong such as a sheet generation failing.
Inline
Inline banners are short messages used to communicate a change of state at the component level. Usually, this will be used when something has gone wrong such as missing information.
- Place your inline message in context of the component to avoid ambiguity
- When communicating an error, clearly explain what went wrong, ideally with a next step
- When communicating an error, the message should be removed as soon as the input is valid so that our customers can immediately tell they fixed the issue
