Resources
Intro & Anatomy
Snackbars provide brief, non-intrusive messages that inform users about actions or system status without interrupting their workflow. Use snackbars for temporary notifications such as confirmations, status updates, or simple alerts that don't require immediate user response.
Snackbars should never interrupt the user experience and can either disappear automatically after a set time or remain on screen until the user takes action. They appear at the bottom of the screen to maintain visual hierarchy whilst providing clear feedback.
Options & Styles
Content
Message is mandatory and contains the primary snackbar information.
Close icon is optional but strongly recommended to give users control over dismissal.
Actions
An action is optional and can include either a link or button for user interaction related to the message.
Stacking
Stacked snackbars can appear up to 3 at once, with the newest appearing at the top of the stack.
Usage
Snackbars should provide concise, helpful information without overwhelming users or interrupting their current tasks. Use appropriate timing and stacking to maintain usability.
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 clearly.
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.
Position snackbars at the bottom of the screen for optimal mobile usability.
Avoid positioning snackbars anywhere other than the bottom of the screen on mobile devices.
Theming
You can customise colours, shadows, border width and radius, and font styles to match your design requirements.