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