FEEDBACK / COMPONENTS
Alert
Explain a state and the next useful step.
About alert
Alerts provide status feedback to a user that is either related to their actions and selections, or is otherwise informative. Great uses of alert include: Results of a user submitting a form or other action Providing brief follow up context Showing contextual information based on a selection Alerts can be: Shown in context Fixed and sticky at the top of the page Dismissed by the user Dismissed on a timer Static and not able to be dismissed
Anatomy
Shared parts, named consistently.
- 1ContainerRequired
Styled container that uses color to get the user’s attention
- 2IconRequired
Styled container that uses color to get the user’s attention
- 3TextRequired
High level context for the Alert, provides instruction to the user
- 4Subtext
Styled container that uses color to get the user’s attention
- 5Link
Provides follow up context or otherwise is a relevant place to go based on user’s actions
- 6Dismiss
Allows the Alert to be dismissed
Try the default
A working example with the shared V1 visual language.
When to use
Use semantic intent with an icon and clear text. Announce newly triggered errors; avoid repeatedly announcing persistent guidance.
Only included actions receive focus. A dismiss control has an explicit accessible name.