Material-UI Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible Material-ui alerts.
Examples
Default! This is a default alert—check it out!
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import SnackbarContent from "@material-ui/core/SnackbarContent";
// @material-ui/icons components
// core components
import componentStyles from "assets/theme/components/snackbar.js";
const useStyles = makeStyles(componentStyles);
function Example() {
const classes = useStyles();
const defaultSnackbarRootClasses = { root: classes.defaultSnackbar }
const primarySnackbarRootClasses = { root: classes.primarySnackbar }
const secondarySnackbarRootClasses = { root: classes.secondarySnackbar }
const infoSnackbarRootClasses = { root: classes.infoSnackbar }
const successSnackbarRootClasses = { root: classes.successSnackbar }
const errorSnackbarRootClasses = { root: classes.errorSnackbar }
const warningSnackbarRootClasses = { root: classes.warningSnackbar }
return (
<>
<SnackbarContent
elevation={0}
classes={defaultSnackbarRootClasses}
message={
<>
<strong>Default!</strong> This is a default alert—check it out!
</>
}
/>
<SnackbarContent
elevation={0}
classes={primarySnackbarRootClasses}
message={
<>
<strong>Primary!</strong> This is a primary alert—check it out!
</>
}
/>
<SnackbarContent
elevation={0}
classes={secondarySnackbarRootClasses}
message={
<>
<strong>Secondary!</strong> This is a secondary alert—check it out!
</>
}
/>
<SnackbarContent
elevation={0}
classes={infoSnackbarRootClasses}
message={
<>
<strong>Info!</strong> This is a info alert—check it out!
</>
}
/>
<SnackbarContent
elevation={0}
classes={successSnackbarRootClasses}
message={
<>
<strong>Success!</strong> This is a success alert—check it out!
</>
}
/>
<SnackbarContent
elevation={0}
classes={errorSnackbarRootClasses}
message={
<>
<strong>Error!</strong> This is a error alert—check it out!
</>
}
/>
<SnackbarContent
elevation={0}
classes={warningSnackbarRootClasses}
message={
<>
<strong>Warning!</strong> This is a warning alert—check it out!
</>
}
/>
</>
);
}
export default Example;With icon
Warning! This is a warning alert—check it out
that has an icon too!
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import Box from "@material-ui/core/Box";
// @material-ui/icons components
import ThumbUp from "@material-ui/icons/ThumbUp";
// core components
import componentStyles from "assets/theme/components/snackbar.js";
const useStyles = makeStyles(componentStyles);
function Example() {
const classes = useStyles();
const warningSnackbarRootClasses = { root: classes.warningSnackbar }
return (
<>
<SnackbarContent
elevation={0}
classes={warningSnackbarRootClasses}
message={
<>
<Box
fontSize="1.25rem"
display="flex"
marginRight="1.25rem"
alignItems="center"
>
<Box
component={ThumbUp}
width="1.25rem!important"
height="1.25rem!important"
/>
</Box>
<strong>Warning!</strong> This is a warning alert—check it out!
</>
}
/>
</>
);
}
export default Example;Dismissing
Default! This is a default alert—check it
out!
Primary! This is a primary alert—check it
out!
Secondary! This is a secondary alert—check it
out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it
out!
Danger! This is a danger alert—check it
out!
Warning! This is a warning alert—check it
out!
Copy
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Fade from "@material-ui/core/Fade";
import IconButton from "@material-ui/core/IconButton";
import SnackbarContent from "@material-ui/core/SnackbarContent";
// @material-ui/icons components
import ThumbUp from "@material-ui/icons/ThumbUp";
// core components
import hexToRgb from "assets/theme/hex-to-rgb.js";
import componentStyles from "assets/theme/components/snackbar.js";
const useStyles = makeStyles(componentStyles);
function Example() {
const classes = useStyles();
const theme = useTheme();
const [fadeDefault, setFadeDefault] = React.useState(true);
const [showDefault, setShowDefault] = React.useState(true);
const [fadePrimary, setFadePrimary] = React.useState(true);
const [showPrimary, setShowPrimary] = React.useState(true);
const [fadeSecondary, setFadeSecondary] = React.useState(true);
const [showSecondary, setShowSecondary] = React.useState(true);
const [fadeInfo, setFadeInfo] = React.useState(true);
const [showInfo, setShowInfo] = React.useState(true);
const [fadeSuccess, setFadeSuccess] = React.useState(true);
const [showSuccess, setShowSuccess] = React.useState(true);
const [fadeError, setFadeError] = React.useState(true);
const [showError, setShowError] = React.useState(true);
const [fadeWarning, setFadeWarning] = React.useState(true);
const [showWarning, setShowWarning] = React.useState(true);
const defaultSnackbarRootClasses = { root: classes.defaultSnackbar };
const primarySnackbarRootClasses = { root: classes.primarySnackbar };
const secondarySnackbarRootClasses = { root: classes.secondarySnackbar };
const infoSnackbarRootClasses = { root: classes.infoSnackbar };
const successSnackbarRootClasses = { root: classes.successSnackbar };
const errorSnackbarRootClasses = { root: classes.errorSnackbar };
const warningSnackbarRootClasses = { root: classes.warningSnackbar };
return (
<>
{showDefault && (
<Fade in={fadeDefault} onExited={() => setShowDefault(false)}>
<SnackbarContent
elevation={0}
classes={defaultSnackbarRootClasses}
action={
<Box
component={IconButton}
padding="0!important"
onClick={() => setFadeDefault(false)}
>
<Box
component="span"
color={"rgba(" + hexToRgb(theme.palette.white.main) + ",.6)"}
>
×
</Box>
</Box>
}
message={
<>
<Box
fontSize="1.25rem"
display="flex"
marginRight="1.25rem"
alignItems="center"
>
<Box
component={ThumbUp}
width="1.25rem!important"
height="1.25rem!important"
/>
</Box>
<strong>Default!</strong> This is a default alert—check it out!
</>
}
/>
</Fade>
)}
{showPrimary && (
<Fade in={fadePrimary} onExited={() => setShowPrimary(false)}>
<SnackbarContent
elevation={0}
classes={primarySnackbarRootClasses}
action={
<Box
component={IconButton}
padding="0!important"
onClick={() => setFadePrimary(false)}
>
<Box
component="span"
color={"rgba(" + hexToRgb(theme.palette.white.main) + ",.6)"}
>
×
</Box>
</Box>
}
message={
<>
<Box
fontSize="1.25rem"
display="flex"
marginRight="1.25rem"
alignItems="center"
>
<Box
component={ThumbUp}
width="1.25rem!important"
height="1.25rem!important"
/>
</Box>
<strong>Primary!</strong> This is a primary alert—check it out!
</>
}
/>
</Fade>
)}
{showSecondary && (
<Fade in={fadeSecondary} onExited={() => setShowSecondary(false)}>
<SnackbarContent
elevation={0}
classes={secondarySnackbarRootClasses}
action={
<Box
component={IconButton}
padding="0!important"
onClick={() => setFadeSecondary(false)}
>
<Box
component="span"
color={"rgba(" + hexToRgb(theme.palette.dark.main) + ",.6)"}
>
×
</Box>
</Box>
}
message={
<>
<Box
fontSize="1.25rem"
display="flex"
marginRight="1.25rem"
alignItems="center"
>
<Box
component={ThumbUp}
width="1.25rem!important"
height="1.25rem!important"
/>
</Box>
<strong>Secondary!</strong> This is a secondary alert—check it
out!
</>
}
/>
</Fade>
)}
{showInfo && (
<Fade in={fadeInfo} onExited={() => setShowInfo(false)}>
<SnackbarContent
elevation={0}
classes={infoSnackbarRootClasses}
action={
<Box
component={IconButton}
padding="0!important"
onClick={() => setFadeInfo(false)}
>
<Box
component="span"
color={"rgba(" + hexToRgb(theme.palette.white.main) + ",.6)"}
>
×
</Box>
</Box>
}
message={
<>
<Box
fontSize="1.25rem"
display="flex"
marginRight="1.25rem"
alignItems="center"
>
<Box
component={ThumbUp}
width="1.25rem!important"
height="1.25rem!important"
/>
</Box>
<strong>Info!</strong> This is a info alert—check it out!
</>
}
/>
</Fade>
)}
{showSuccess && (
<Fade in={fadeSuccess} onExited={() => setShowSuccess(false)}>
<SnackbarContent
elevation={0}
classes={successSnackbarRootClasses}
action={
<Box
component={IconButton}
padding="0!important"
onClick={() => setFadeSuccess(false)}
>
<Box
component="span"
color={"rgba(" + hexToRgb(theme.palette.white.main) + ",.6)"}
>
×
</Box>
</Box>
}
message={
<>
<Box
fontSize="1.25rem"
display="flex"
marginRight="1.25rem"
alignItems="center"
>
<Box
component={ThumbUp}
width="1.25rem!important"
height="1.25rem!important"
/>
</Box>
<strong>Success!</strong> This is a success alert—check it out!
</>
}
/>
</Fade>
)}
{showError && (
<Fade in={fadeError} onExited={() => setShowError(false)}>
<SnackbarContent
elevation={0}
classes={errorSnackbarRootClasses}
action={
<Box
component={IconButton}
padding="0!important"
onClick={() => setFadeError(false)}
>
<Box
component="span"
color={"rgba(" + hexToRgb(theme.palette.white.main) + ",.6)"}
>
×
</Box>
</Box>
}
message={
<>
<Box
fontSize="1.25rem"
display="flex"
marginRight="1.25rem"
alignItems="center"
>
<Box
component={ThumbUp}
width="1.25rem!important"
height="1.25rem!important"
/>
</Box>
<strong>Error!</strong> This is a error alert—check it out!
</>
}
/>
</Fade>
)}
{showWarning && (
<Fade in={fadeWarning} onExited={() => setShowWarning(false)}>
<SnackbarContent
elevation={0}
classes={warningSnackbarRootClasses}
action={
<Box
component={IconButton}
padding="0!important"
onClick={() => setFadeWarning(false)}
>
<Box
component="span"
color={"rgba(" + hexToRgb(theme.palette.white.main) + ",.6)"}
>
×
</Box>
</Box>
}
message={
<>
<Box
fontSize="1.25rem"
display="flex"
marginRight="1.25rem"
alignItems="center"
>
<Box
component={ThumbUp}
width="1.25rem!important"
height="1.25rem!important"
/>
</Box>
<strong>Warning!</strong> This is a warning alert—check it out!
</>
}
/>
</Fade>
)}
</>
);
}
export default Example;Props
If you want to see more examples and properties please check the official Material-UI Documentation.