Alert

The Alert component displays important messages to users, such as success confirmations, error notifications, warnings, or informational messages. Material UI's Alert component provides a consistent, accessible, and customizable way to communicate feedback to users.

Alerts are used to provide contextual feedback about user actions, system status, or important information that requires user attention.

Variants

Material UI Alerts come in three variants to suit different design needs:

Standard

The default variant with a colored background:

jsx
<Alert severity="info">
  <span>This is an info alert — check it out!</span>
</Alert>

Filled

A variant with a solid colored background:

jsx
<Alert severity="success" variant="filled">
  <span>This is a filled success alert — check it out!</span>
</Alert>

Outlined

A variant with an outlined border:

jsx
<Alert severity="warning" variant="outlined">
  <span>This is an outlined warning alert — check it out!</span>
</Alert>

Severity Levels

Alerts support different severity levels to convey different types of messages:

Success

Used to indicate successful operations or positive feedback:

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

Error

Used to indicate errors or problems that need attention:

jsx
<Alert severity="error">
  <span>This is an error alert — check it out!</span>
</Alert>

Warning

Used to indicate warnings or cautionary information:

jsx
<Alert severity="warning">
  <span>This is a warning alert — check it out!</span>
</Alert>

Info

Used to provide informational messages:

jsx
<Alert severity="info">
  <span>This is an info alert — check it out!</span>
</Alert>

With Title

Alerts can include a title for better organization:

jsx
<Alert severity="error">
  <AlertTitle>Error</AlertTitle>
  <span>This is an error alert with a title — check it out!</span>
</Alert>

Icons

With Icons (Default)

By default, alerts display an icon based on their severity:

Without Icons

You can hide the icon if needed:

jsx
<Alert severity="info" icon={false}>
  <span>This alert has no icon</span>
</Alert>

Dismissible Alerts

Alerts can be made dismissible with a close button:

jsx
const [open, setOpen] = useState(true);

if (!open) return null;

<Alert
  severity="info"
  action={
    <IconButton
      aria-label="close"
      color="inherit"
      size="small"
      onClick={() => setOpen(false)}
    >
      <Close fontSize="inherit" />
    </IconButton>
  }
>
  <span>This is a dismissible alert — click the X to close it!</span>
</Alert>;

Common Props

The Alert component accepts various props to customize its appearance and behavior:

jsx
<Alert
  severity="info" // 'error' | 'info' | 'success' | 'warning'
  variant="standard" // 'standard' | 'filled' | 'outlined'
  icon={true} // boolean | ReactNode
  onClose={handleClose} // function (makes alert dismissible)
  color="info" // 'error' | 'info' | 'success' | 'warning'
  action={<Button>Action</Button>} // ReactNode - custom action button
  sx={{}} // object - custom styles
>
  <span>Alert content</span>
</Alert>

Accessibility

Material UI Alerts are built with accessibility in mind:

• ARIA roles: Proper ARIA roles and attributes for screen readers
• Color contrast: Meets WCAG guidelines for color contrast ratios
• Icon indicators: Visual and semantic indicators for different severity levels
• Keyboard navigation: Full keyboard support for dismissible alerts
• Focus management: Proper focus handling when alerts appear or disappear
• Screen reader announcements: Alerts are properly announced to screen readers

Best Practices

1. Use appropriate severity levels - Choose the right severity (error, warning, info, success) to match the message importance
2. Keep messages concise - Alert messages should be brief and actionable
3. Use titles for complex messages - Add AlertTitle for longer or more structured messages
4. Make critical alerts dismissible - Allow users to dismiss non-critical alerts
5. Don't overuse alerts - Reserve alerts for important information that requires attention
6. Provide actionable content - Include clear next steps when appropriate
7. Consider placement - Position alerts where users will notice them without being intrusive
8. Use consistent styling - Maintain consistent alert styling throughout your application

Examples

Form Validation Error

jsx
<Alert severity="error">
  <AlertTitle>Validation Error</AlertTitle>
  <span>Please correct the following errors:</span>
  <ul>
    <li>Email is required</li>
    <li>Password must be at least 8 characters</li>
  </ul>
</Alert>

Success Confirmation

jsx
<Alert severity="success" variant="filled">
  <span>Your changes have been saved successfully!</span>
</Alert>

Warning Message

jsx
<Alert severity="warning" variant="outlined">
  <AlertTitle>Warning</AlertTitle>
  <span>This action cannot be undone. Are you sure you want to continue?</span>
</Alert>

Info with Action

jsx
<Alert
  severity="info"
  action={
    <Button color="inherit" size="small">
      Learn More
    </Button>
  }
>
  <span>New features are available. Click to learn more!</span>
</Alert>

Auto-dismissing Alert

jsx
const [open, setOpen] = useState(true);

useEffect(() => {
  if (open) {
    const timer = setTimeout(() => {
      setOpen(false);
    }, 5000);
    return () => clearTimeout(timer);
  }
}, [open]);

{
  open && (
    <Alert severity="success" onClose={() => setOpen(false)}>
      <span>Operation completed successfully!</span>
    </Alert>
  );
}

Documentation

• Material UI - Alert