The SuiSnackbar component helps you to simply create a beautiful notification/alert. It uses MUI Snackbar in base and you can use all of the props from MUI Snackbar for the SuiSnackbar component.

The components will be visible on the bottom right corner of the page.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.


// Soft UI Dashboard PRO React Components import SuiSnackbar from "components/SuiSnackbar";

Props Information

color'primary''secondary''info''success''warning''error''light''dark'infoChange the SuiSnackbar type.
icon*nodeUsed to set the SuiSnackbar icon, its a required prop.
title*stringUsed to set the SuiSnackbar title, its a required prop.
dateTime*stringUsed to set the SuiSnackbar date or time, its a required prop.
content*nodeUsed to set the SuiSnackbar content or description, its a required prop.
bgWhiteboolfalseUsed to set the SuiSnackbar background color to white.
close*functionUsed to close the SuiSnackbar once the user hit the close button, its a required prop.
MUI PropsYou can pass all of the MUI Snackbar props for the SuiSnackbar as well.


The below code contains a full exmaple of the SuiSnackbar, you can check the functionality as well that how the SuiSnackbar toggles between visible and invisible states.