Skip to main content

Alerts

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.



Outlined

Use variant='outlined' prop with <Alert> component for outlined alerts.



Filled

Use variant='filled' prop with <Alert> component for filled alerts.



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.



Description

You can use the AlertTitle component to display a formatted title above the content.



Dismissible

You need to use one of the transition components (viz. Collapse, Fade, Grow and Slide) to make a dismissible alert.