Introduction
The snackbar component is a transient notification that delivers information at the bottom of the screen. It provides immediate feedback and keeps the user updated about status changes or minor errors.
- Snackbars should never interrupt the user experience
- Can either disappear on it’s own or remain on screen until the user takes action
Usage
Use the snackbar component for brief, non-critical messages that don't require user interaction. It's perfect for instant feedback or quick updates, but due to its temporary nature, it shouldn't be used for important or persistent information.
Use for short non-critical messages that don't require user interaction.
Don't require the user to press a button to apply changes.
Use a maximum of two lines to convey information.
Refrain from using long blocks of text in a snackbar.
Stack on top of each other with the newest one appearing at the top.
Don’t stack more than three snackbars on top of each other.
Mobile Specs
On both Android and iOs the width of the snackbar should be set to 100vw or 100%.
