Alert
Alert is used to communicate success, a warning, a problem/error, or necessary information—prominent but not necessarily interruptive.
- Alerts occupy the entire width of their container.
- Avoid right-aligning content; this causes a higher cognitive load to scan information and does not scale well on mobile.
- Review the UX writing guidelines for Alert.
Severity | Color | Usage |
---|---|---|
Error | Red | To inform the user of an error or a problem; can be system or user-originated. Optionally, to block the user from proceeding until the user/system resolves the issue. Optionally, provide a link to take action. |
Warning | Yellow | To warn or inform the user of something they need to pay attention to or do. Optionally, provide a link to take action or get more info. |
Info | Gray | To provide necessary or helpful messages to the user. Optionally, provide a link to take action or get more info. |
Success | Green | To confirm that a task that the user performed was successful. Optionally, provide a link to undo or take a subsequent action. |
This pattern can be used as a replacement for ErrorBox
.
Name | Type | Default | Description |
---|---|---|---|
children | ReactNode | The content of the Alert | |
label Required | string | The title of the alert | |
severity | error info success warning | info | The level of severity for the Alert |
Do the following when you are dynamically adding an Alert to your page (e.g., on form submission):
- Wrap the Alert within a parent element using
role="alert"
orrole="status"
. If the Alert severity isinfo
, userole="status"
, otherwiserole="alert"
. - Add
role="none"
to the Alert to prevent the Alert from being read out twice to screen readers.
The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.
render(<Alert severity="warning" label="Isaiah doesn’t have a personal email"><p>We suggest you <Link href="https://gusto.com">add a personal email</Link> so they can signinto Gusto.</p></Alert>,);const alert = screen.getByLabelText('Isaiah doesn’t have a personal email');// Role may also be queried for more specificity, but will need to use a regular// expression or include the severity label://// RegExp:// screen.getByRole('alert', {// name: /Isaiah doesn’t have a personal email/,// });//// Severity label included:// screen.getByRole('alert', {// name: 'Warning: Isaiah doesn’t have a personal email',// });expect(alert).toHaveTextContent('We suggest you add a personal email so they can sign into Gusto.');