React MUI Alert Feedback

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Alert feedback. An alert component is used to display a short, important message which attracts the attention of the user without interrupting it.

Alert Feedback Variants:

• Basic alerts: A basic alert feedback variant provides four severity levels that set a distinctive icon and color.
• Description: In this variant, we use the AlertTitle component to display a formatted title above the content of the alert component.
• Actions: An alert component contains an action, such as a close or undo action which is usually rendered after the message, at the end of the alert.
• Icons: The icon prop allows the users to add an icon at the beginning of the alert component by overriding the default icon.
• Variants: There are two variants: outlined and filled.
• Toast: A toast component can also be used with the help of a snackbar.
• Color: The color prop allows the users to change the alert color by overriding the default color for the specified severity.
• API: The APIs are:
  • <Alert />
  • <AlertTitle />

Syntax:

<Alert>...</Alert>

Creating React Project:

Step 1: To create a react app, install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: Below example demonstrates the React MUI alert feedback component with a description.

Javascript

import { Alert, AlertTitle } from "@mui/material";
import * as React from "react";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Alert feedback</h2>
            </div>
            <div style={{ width: '50%' }}>
                <Alert severity="error">
                    <AlertTitle>Error</AlertTitle>
                    Please return to the first page!
                </Alert>
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI alert component with icons.

Javascript

import { Alert, AlertTitle } from "@mui/material";
import * as React from "react";

import VerifiedIcon from '@mui/icons-material/Verified';

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Alert feedback</h2>
            </div>
            <div style={{ width: '50%' }}>
                <Alert severity="success" icon={<VerifiedIcon />}>
                    <AlertTitle>Success</AlertTitle>
                    Yay! You have successfully completed the course.
                </Alert>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-alert/