Snackbar

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

Overview

Overview

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)

Guidelines

Best practices

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.

Content

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.