Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Note: This component is not documented in the Material Design guidelines, but MUI supports it.

Basic alerts

The alert offers four severity levels that set a distinctive icon and color.

This is an error alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="error">This is an error alert — check it out!</Alert>
<Alert severity="warning">This is a warning alert — check it out!</Alert>
<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>
<Alert severity="error">This is an error alert — check it out!</Alert>
<Alert severity="warning">This is a warning alert — check it out!</Alert>
<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

Description

You can use the AlertTitle component to display a formatted title above the content.

Error

This is an error alert — check it out!

Warning

This is a warning alert — check it out!

Info

This is an info alert — check it out!

Success

This is a success alert — check it out!

<Alert severity="error">
  <AlertTitle>Error</AlertTitle>
  This is an error alert — <strong>check it out!</strong>
</Alert>
<Alert severity="warning">
  <AlertTitle>Warning</AlertTitle>
  This is a warning alert — <strong>check it out!</strong>
</Alert>
<Alert severity="info">
  <AlertTitle>Info</AlertTitle>
  This is an info alert — <strong>check it out!</strong>
</Alert>
<Alert severity="success">
  <AlertTitle>Success</AlertTitle>
  This is a success alert — <strong>check it out!</strong>
</Alert>
<Alert severity="error">
  <AlertTitle>Error</AlertTitle>
  This is an error alert — <strong>check it out!</strong>
</Alert>
<Alert severity="warning">
  <AlertTitle>Warning</AlertTitle>
  This is a warning alert — <strong>check it out!</strong>
</Alert>
<Alert severity="info">
  <AlertTitle>Info</AlertTitle>
  This is an info alert — <strong>check it out!</strong>
</Alert>
<Alert severity="success">
  <AlertTitle>Success</AlertTitle>
  This is a success alert — <strong>check it out!</strong>
</Alert>

Press Enter to start editing

Actions

An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert.

If an onClose callback is provided and no action prop is set, a close icon is displayed. The action prop can be used to provide an alternative action, for example using a Button or IconButton.

This is a success alert — check it out!

<Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
<Alert
  action={
    <Button color="inherit" size="small">
      UNDO
    </Button>
  }
>
  This is a success alert — check it out!
</Alert>
<Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
<Alert
  action={
    <Button color="inherit" size="small">
      UNDO
    </Button>
  }
>
  This is a success alert — check it out!
</Alert>

Press Enter to start editing

Transition

You can use a transition component such as Collapse to transition the appearance of the alert.

Close me!

Icons

The icon prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity.

You can change the default severity to icon mapping with the iconMapping prop. This can be defined globally using theme customization.

Setting the icon prop to false will remove the icon altogether.

This is a success alert — check it out!

<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
  This is a success alert — check it out!
</Alert>
<Alert
  iconMapping={{
    success: <CheckCircleOutlineIcon fontSize="inherit" />,
  }}
>
  This is a success alert — check it out!
</Alert>
<Alert icon={false} severity="success">
  This is a success alert — check it out!
</Alert>
<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
  This is a success alert — check it out!
</Alert>
<Alert
  iconMapping={{
    success: <CheckCircleOutlineIcon fontSize="inherit" />,
  }}
>
  This is a success alert — check it out!
</Alert>
<Alert icon={false} severity="success">
  This is a success alert — check it out!
</Alert>

Press Enter to start editing

Variants

Two additional variants are available – outlined, and filled:

Outlined

This is an error alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!

<Alert variant="outlined" severity="error">
  This is an error alert — check it out!
</Alert>
<Alert variant="outlined" severity="warning">
  This is a warning alert — check it out!
</Alert>
<Alert variant="outlined" severity="info">
  This is an info alert — check it out!
</Alert>
<Alert variant="outlined" severity="success">
  This is a success alert — check it out!
</Alert>
<Alert variant="outlined" severity="error">
  This is an error alert — check it out!
</Alert>
<Alert variant="outlined" severity="warning">
  This is a warning alert — check it out!
</Alert>
<Alert variant="outlined" severity="info">
  This is an info alert — check it out!
</Alert>
<Alert variant="outlined" severity="success">
  This is a success alert — check it out!
</Alert>

Press Enter to start editing

When using an outlined alert with the Snackbar component, background content will be visible and bleed through the alert by default. You can prevent this by adding bgcolor: 'background.paper' to thesx prop on the Alert component.

Filled

This is an error alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!

<Alert variant="filled" severity="error">
  This is an error alert — check it out!
</Alert>
<Alert variant="filled" severity="warning">
  This is a warning alert — check it out!
</Alert>
<Alert variant="filled" severity="info">
  This is an info alert — check it out!
</Alert>
<Alert variant="filled" severity="success">
  This is a success alert — check it out!
</Alert>
<Alert variant="filled" severity="error">
  This is an error alert — check it out!
</Alert>
<Alert variant="filled" severity="warning">
  This is a warning alert — check it out!
</Alert>
<Alert variant="filled" severity="info">
  This is an info alert — check it out!
</Alert>
<Alert variant="filled" severity="success">
  This is a success alert — check it out!
</Alert>

Press Enter to start editing

Toast

You can use the Snackbar to display a toast with the Alert.

Color

The color prop will override the default color for the specified severity.

This is a success alert — check it out!

<Alert severity="success" color="info">
  This is a success alert — check it out!
</Alert>
<Alert severity="success" color="info">
  This is a success alert — check it out!
</Alert>

Press Enter to start editing

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alert/)

When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads.

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text.

Actions must have a tab index of 0 so that they can be reached by keyboard-only users.

Alert

Basic alerts

Description

Actions

Transition

Icons

Variants

Outlined

Filled

Toast

Color

Accessibility

API