Alert

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

Introduction

Component

After installation, you can start building with this component using the following basic elements:

import Alert from '@mui/joy/Alert';

export default function MyApp() {
  return <Alert />;
}

Variants

The alert component supports the four global variants: solid (default), soft, outlined and plain.

This is an alert using the solid variant.

This is an alert using the soft variant.

This is an alert using the outlined variant.

This is an alert using the plain variant.

<Alert variant="solid">This is an alert using the solid variant.</Alert>
<Alert variant="soft">This is an alert using the soft variant.</Alert>
<Alert variant="outlined">This is an alert using the outlined variant.</Alert>
<Alert variant="plain">This is an alert using the plain variant.</Alert>
<Alert variant="solid">This is an alert using the solid variant.</Alert>
<Alert variant="soft">This is an alert using the soft variant.</Alert>
<Alert variant="outlined">This is an alert using the outlined variant.</Alert>
<Alert variant="plain">This is an alert using the plain variant.</Alert>

Press Enter to start editing

Colors

Every palette included in the theme is available via the color prop. Play around combining different colors with different variants.

Primary

Neutral

Danger

Info

Success

Warning

Variant:

SolidSoftOutlinedPlain

Sizes

The alert components comes with three sizes out of the box: sm, md (the default), and lg.

This is an alert in the small size.

This is an alert in the medium size.

This is an alert in the large size.

<Alert size="sm">This is an alert in the small size.</Alert>
<Alert size="md">This is an alert in the medium size.</Alert>
<Alert size="lg">This is an alert in the large size.</Alert>
<Alert size="sm">This is an alert in the small size.</Alert>
<Alert size="md">This is an alert in the medium size.</Alert>
<Alert size="lg">This is an alert in the large size.</Alert>

Press Enter to start editing

Decorators

Use the startDecorator and/or endDecorator props to insert actionable buttons or icon buttons on the Alert.

Your message was sent successfully.

Your account was updated.

Common examples

Various states

Success

This is a Success message.

Warning

This is a Warning message.

Error

This is a Error message.

Info

This is a Info message.

Danger alerts

This file was successfully deleted

Accessibility

Here are a few tips to make sure you have an accessible alert component:

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.