Snackbars
Snackbars inform the user of an action that has been performed by an app or will perform in the
future. They appear at the bottom of the screen temporarily, without interrupting any user activity.
Simple Snackbars
These are snackbars without any icons, they only hold the text.
Use the class
Here are some simple snackbars:
Use the class
snackbars along with the variant class as
preferred
- success-snackbar, warning-snackbar, danger-snackbar,
primary-snackbar-link or secondary-snackbar-link.
Here are some simple snackbars:
This is a simple success snackbar!
This is a simple warning snackbar!
This is a simple error snackbar!
A simple primary snackbar with an example link. Give it a click if you like.
A simple secondary snackbar with an example link. Give it a click if you like.
This is a simple success snackbar!
Snackbars with Icons
These are snackbars with message icons and a dismiss button. Use the class
These snackbars have two child containers - one for the icon and snackbar message, and the other for the dismiss button.
Use class
Here are some snackbars with icons:
icon-snackbars along with the classes snackbars and the preferred variant.
These snackbars have two child containers - one for the icon and snackbar message, and the other for the dismiss button.
Use class
icon-text in the first child and close-btn in the second child.
Here are some snackbars with icons:
check_circle
This is a success snackbar!
error_outline
This is a warning snackbar!
report_problem
This is an error snackbar!
A primary snackbar with an example link
A secondary snackbar with an example link
error_outline
This is a warning snackbar!