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

This pattern can be used as a replacement for ErrorBox.

React props
NameTypeDefaultDescription
children  
ReactNode
-The content of the Alert
headingLevel  Required
123456
-The semantic level that will be applied to the heading. 1 will become <h1>, 2 will become <h2>, etc.
label  Required
string
-The title of the alert
severity  
errorinfosuccesswarning
infoThe 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.');