// ** MUI Imports import Grid from '@mui/material/Grid' import Typography from '@mui/material/Typography' // ** Custom Components Imports import CardSnippet from 'src/@core/components/card-snippet' // ** Demo Components Imports import AlertsBasic from 'src/views/components/alerts/AlertsBasic' import AlertsFilled from 'src/views/components/alerts/AlertsFilled' import AlertsActions from 'src/views/components/alerts/AlertsActions' import AlertsOutlined from 'src/views/components/alerts/AlertsOutlined' import AlertsDescription from 'src/views/components/alerts/AlertsDescription' import AlertsDismissible from 'src/views/components/alerts/AlertsDismissible' // ** Source code imports import * as source from 'src/views/components/alerts/AlertsSourceCode' const Alerts = () => { return ( Use severity={`{'error' | 'warning' | 'info' | 'success'}`} prop with{' '} <Alert> component for different colored alerts. Use variant='outlined' prop with <Alert> component for outlined alerts. Use variant='filled' prop with <Alert> component for filled alerts. 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. You can use the AlertTitle component to display a formatted title above the content. You need to use one of the transition components (viz. Collapse, Fade, Grow and Slide) to make a dismissible alert. ) } export default Alerts