Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Code Sandbox
Usage
Keep the pre-defined icons
The pre-defined icons represent universal alert categories. These icons are widely used in applications, therefore, users will likely have existing mental models attached to them.
Do
Use the pre-defined icons to keep the visual cues of alert categories consistent.
Don't
Avoid swapping the pre-defined icons to custom ones.
Keep the content concise and clear
Make sure the user has the right amount of information by using phrases or short sentences.
Users are likely to skip lengthy messages and therefore miss important information that is relevant to complete the flow.
Do
Share relevant information only so the user can quickly read it and will be less likely to skip it.
Don't
Avoid sharing information that has no relevance to the actions the user is performing in the view.
Be mindful of colors and semantic meaning
The pre-defined colors (along with the pre-defined icons) are suitable to visually support the different types of alerts.
Do
Keep the pre-defined colors paired with the pre-defined icons for each variant.
Don't
Avoid changing the pre-defined colors and also avoid combining colors and icons that belong to different alert types.
Emphasis
To add emphasis to the content inside of alerts, we highly recommend using a bold font weight
Use a bold font weight to add emphasis to the alert.