Snackbar
A discreet but efficient way to convey feedback on the outcome of an action.
Last updated
Was this helpful?
A discreet but efficient way to convey feedback on the outcome of an action.
Last updated
Was this helpful?
Snackbars inform users when a backend action is done. They pop up briefly at the bottom of the screen, explaining the outcome without being too intrusive.
Use snackbars to quickly share results, whether good or bad. For example: 'Item added' or 'Item deleted'
Snackbar should not be used to display critical information; use alerts instead. For example: 'You cannot perform this action because your profile has not been verified'
Snackbars can only have one button.
Prototyping a Snackbar on Figma for designers
Trigger : onClick OR onDelay - 50ms
Animation type : Custom Spring
Duration: 300ms
Keep it short
Snackbars are visible for 5 seconds, users won’t have time to read a long sentence. If you need more than one sentence consider using another component.
Use simple words
Use everyday language and generic terms as much as possible, it’ll be easier to reuse.
Capitalize the first word, no period
Template: Object + verb+ED
