Page alert
Page alerts are colour-coded, non-disruptive notifications that provide Success, Error, Warning or Information messages at relevant times during the user journey. They should not be confused with Callouts.
import { ... } from '@ag.ds-next/react/page-alert';Page alerts warn, inform or prompt a user and are generally triggered in response to actions such as save, delete, confirm, submit and cancel.
Keep it short
Content should be easily understood at a glance.
Use constructive, no-blame language, avoid vague descriptions and always provide a solution.
Do
We can’t find an account with those details
Please check your information and try again
Don’t
You have entered the wrong information
Please come back later
Don’t repeat yourself
Avoid duplicating the title in the body copy. If the alert title is enough to convey the message, body copy may not be necessary.
<PageAlert tone="warning" title="Browser out of date"> <Text as="p">Your web browser out of date</Text> </PageAlert>
Effective buttons
Always include a Primary and Secondary button CTA that provides a clear path. Buttons should be clearly labelled with 1-2 verbs such as
-
View
-
Cancel
-
Go back
-
Submit
Only use Ok for blue information alerts that require no action, and don’t use ambiguous words such as Yes, or No.
Validation in forms
Page alert can be used to display validation errors in forms, if there is more that one error. Read more about this in the Form validation pattern.