Snackbar
A discreet but efficient way to convey feedback on the outcome of an action.
Last updated
A discreet but efficient way to convey feedback on the outcome of an action.
Last updated
Snackbars notify users of a process that Mirakl has finalized. They appear at the bottom of the screen for a very short period of time, enough to explain what has happened but not too long in order not to disrupt the user.
Snackbar should be used:
To quickly explain the result of an action, whether positive or negative
Snackbar should not be used:
To display critical information (user Alert instead)
Toast should:
Be used for short messages to confirm an action
Not go over 3 words
Rarely be used for error messages
When to use:
For success messages
Only for non-critical errors that are relevant in the moment and can be explained in 3 words. For example, if there’s an internet connection issue, the toast would say, Internet disconnected.
When not to use:
Avoid using toast for error messages. Always try to use a banner to prominently inform merchants about persistent errors.
Snackbars can only have one action
Snackbars can only have one button.
Be as short as possible
Snackbars only appear for 5 seconds. The text should be the most concise possible (keep localization in mind).
Shipping zone created
The shipping zone was successfully created
Product creation failed
Couldn't create this product
If you need to write more than one sentence in a snackbar component, maybe check with the designer if that is the right component to use.
Use generic terms
Use plain language and generic terms as much as possible in snackbar messages. It will make it easier to reuse content for similar use cases.
Use sentence case
Only capitalize the first word of the sentence, no period.
