Skip to content
Edit this page

Alert

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

Introduction

<Alert />

Playground

Color

size

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.

<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>

Colors

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

Variant:

Sizes

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

<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>

Decorators

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

Common examples

Various states

Danger alerts

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.