Skip to content

Alert

Alert is used to communicate success, a warning, a problem/error, or necessary information—prominent but not necessarily interruptive.

Figma logo
  • 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.
SeverityColorUsage
ErrorRedTo 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.
WarningYellowTo 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.
InfoGrayTo provide necessary or helpful messages to the user. Optionally, provide a link to take action or get more info.
SuccessGreenTo 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.

React props
NameTypeDefaultDescription
children  ReactNodeThe content of the Alert
label  RequiredstringThe title of the alert
severity  errorinfosuccesswarninginfoThe 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" or role="status". If the Alert severity is info, use role="status", otherwise role="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 LibraryExternal link with occasional help from JestExternal link.

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 sign
into 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.');