Snackbar

A discreet but efficient way to convey feedback on the outcome of an action.

Overview

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.

When to use ?

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'

Design guidelines

Snackbars can only have one button.

Prototyping a Snackbar on Figma for designers

• Trigger : onClick OR onDelay - 50ms

• Animation type : Custom Spring

• Duration: 300ms

Content

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