Alert

Alerts display brief messages for the user without interrupting their use of the app.

Introduction

The Alert component can be used to provide important and potentially time-sensitive information in a way that does not interfere with the user's tasks. (Source: ARIA APG.)

Basics

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

The Alert component wraps around its content, and stretches to fill its enclosing container, as shown below:

This is a basic Alert.

<Alert>This is a basic Alert.</Alert>

<Alert>This is a basic Alert.</Alert>

Press Enter to start editing

Customization

Variants

The Alert component supports Joy UI's four global variants: solid, soft (default), 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

Sizes

The Alert component comes in three sizes: sm, md (default), and lg:

This is a small Alert.

This is a medium Alert.

This is a large Alert.

<Alert size="sm">This is a small Alert.</Alert>
<Alert size="md">This is a medium Alert.</Alert>
<Alert size="lg">This is a large Alert.</Alert>

<Alert size="sm">This is a small Alert.</Alert>
<Alert size="md">This is a medium Alert.</Alert>
<Alert size="lg">This is a large Alert.</Alert>

Press Enter to start editing

Colors

Every palette included in the theme is available via the color prop. The demo below shows how the values for the color prop are affected by the global variants:

Primary

Neutral

Danger

Info

Success

Warning

Variant:

SolidSoftOutlinedPlain

Decorators

Use the startDecorator and endDecorator props to append actions and icons to either side of the Alert:

Your message was sent successfully.

Your account was updated.

Common examples

Various states

Success

This is a time-sensitive Success Alert.

Warning

This is a time-sensitive Warning Alert.

Error

This is a time-sensitive Error Alert.

Info

This is a time-sensitive Info Alert.

Danger alerts

This file was successfully deleted

Accessibility

Here are some factors to consider to ensure that your Alert is accessible:

Because alerts are not intended to interfere with the use of the app, your Alert component should never affect the keyboard focus.
If an alert contains an action, that action must have a tabindex of 0 so it can be reached by keyboard-only users.
Essential alerts should not disappear automatically—timed interactions can make your app inaccessible to users who need extra time to understand or locate the alert.
Alerts that occur too frequently can inhibit the usability of your app.
Dynamically rendered alerts are announced by screen readers; alerts that are already present on the page when it loads are not announced.
Color does not add meaning to the UI for users who require assistive technology. You must ensure that any information conveyed through color is also denoted in other ways, such as within the text of the alert itself, or with additional hidden text that's read by screen readers.

Anatomy

The Alert component is composed of a single root <div> element with its role set to alert:

<div role="alert" class="JoyAlert-root">
  <!-- Alert contents -->
</div>

Alert

Introduction

Playground

Basics

Customization

Variants

Sizes

Colors

Decorators

Common examples

Various states

Danger alerts

Accessibility

Anatomy