React Snackbar - Argon
PROThe ArgonSnackbar 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 ArgonSnackbar 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
// Argon Dashboard 2 PRO MUI Components
import ArgonSnackbar from "components/ArgonSnackbar";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Change the ArgonSnackbar type. |
| icon* | node | Used to set the ArgonSnackbar icon, its a required prop. | |
| title* | string | Used to set the ArgonSnackbar title, its a required prop. | |
| dateTime* | string | Used to set the ArgonSnackbar date or time, its a required prop. | |
| content* | node | Used to set the ArgonSnackbar content or description, its a required prop. | |
| bgWhite | bool | false | Used to set the ArgonSnackbar background color to white. |
| close* | function | Used to close the ArgonSnackbar once the user hit the close button, its a required prop. | |
| MUI Props | You can pass all of the MUI Snackbar props for the ArgonSnackbar as well. |
Functionality
The below code contains a full exmaple of the ArgonSnackbar, you can check the functionality as well that how the ArgonSnackbar toggles between visible and invisible states.