MUI Alerts - Example & Tutorial
Please refer to MUI's official docs for more details on component's usage guide and API documentation.
Basic
Use severity={'error' | 'warning' | 'info' | 'success'} prop with <Alert> component for different colored alerts.
This is an error alert — check it out!
This is a warning alert — check it out!
This is an info alert — check it out!
This is a success alert — check it out!
Outlined
Use variant='outlined' prop with <Alert> component for outlined alerts.
This is an error alert — check it out!
This is a warning alert — check it out!
This is an info alert — check it out!
This is a success alert — check it out!
Filled
Use variant='filled' prop with <Alert> component for filled alerts.
This is an error alert — check it out!
This is a warning alert — check it out!
This is an info alert — check it out!
This is a success alert — check it out!
Action
To add a button, you need to use action prop with <Alert> component and pass a button inside this prop. To add a close button, you need to use onClose prop with <Alert> component.
This is a success alert — check it out!
This is a success alert — check it out!
This is a success alert — check it out!
Description
You can use the AlertTitle component to display a formatted title above the content.
Error
This is an error alert — check it out!Warning
This is a warning alert — check it out!Info
This is an info alert — check it out!Success
This is a success alert — check it out!
Dismissible
You need to use one of the transition components (viz. Collapse, Fade, Grow and Slide) to make a dismissible alert.
Close me!
Close me!
Close me!
Close me!