Snackbar | NextJS Material Dashboard 2 @ Creative Tim

The MDSnackbar 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 MDSnackbar 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.

Demo

// NextJS Material Dashboard 2 PRO components import MDSnackbar from "/components/MDSnackbar";

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''light''dark'	dark	Change the `MDSnackbar` type.
icon*	node		Used to set the `MDSnackbar` icon, its a required prop.
title*	string		Used to set the `MDSnackbar` title, its a required prop.
dateTime*	string		Used to set the `MDSnackbar` date or time, its a required prop.
content*	node		Used to set the `MDSnackbar` content or description, its a required prop.
bgWhite	bool	false	Used to set the `MDSnackbar` background color to white.
close*	function		Used to close the `MDSnackbar` once the user hit the close button, its a required prop.
MUI Props			You can pass all of the MUI Snackbar props for the `MDSnackbar` as well.

Functionality

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