Alerts carry information you need to communicate to users with higher importance. Message displayed by utilization of Alert component disrupts journey of the user and helps to understand a state of the system in reaction to a triggered action or changed circumstances.
Alert is defined either for web and mobile apps. It is available via appropriate libraries. Use them accordingly.
Use
Alert component is visually dominant and catches eye of the user. Use Alert meaningfully to update users on important changes in system or provide immediate feedback while users interact with forms.
Information
Use Information Alert to provide users:
- additional information or instructions
- format of expected details requested from a user
- actionable steps
Error
Use Error Alert to warn users about:
- summary of typos in form fields (displayed together with error messages on affected inputs)
- errors caused by unprocessed actions in the background (i.e. phone number verification, ...)
- important system state changes (i.e. issues caused byconnection to third party systems, ...)
- something went wrong while a user triggered action
Modifiers
Compared to the other components there isn't an option to choose a specic theme of the component. We have one Alert which can be used either in light and dark themed interfaces.
Format
Content
Icon
Information and Error variant of Alert uses its icon which can't be changed.
Body
Alert supports display of multi-line text. The message must stay concise and to the point though. Provide information which describes what happened.
Action
User is optionally allowed to hide Alert via Close button.
Behavior
Dismissal (Close button)
Style of this button is inherited from Small Button Link – No Icon, yet it has own colours that represent all interaction states. These colours comply with colour code of the Alert component as such. The close button can be optionally hidden.
Related Resources
-> Specs in Figma