> For the complete documentation index, see [llms.txt](https://design.mirakl.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/snackbar.md).

# Snackbar

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

## Overview <a href="#id-101ca4" id="id-101ca4"></a>

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FBY1NmNl6qsD8nPCzSupS%2FSnackbar%20Hero.png?alt=media&amp;token=44ecca59-0915-4e5f-9152-f3d92abb46bb" alt=""><figcaption></figcaption></figure>

## Overview <a href="#id-101ca4" id="id-101ca4"></a>

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](/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/alerts.md) instead)

## Guidelines

### Best practices <a href="#best-practices" id="best-practices"></a>

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](/~/changes/DpgERwSwrKIthStzL4D6/components/actions/buttons.md).

## Content <a href="#id-0969f1" id="id-0969f1"></a>

**Be as short as possible**

&#x20;Snackbars only appear for 5 seconds. The text should be the most concise possible (keep localization in mind).

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FVfwEcQ2L5uVm3vyzO7ng%2FSnackbar%20Example%201.png?alt=media&amp;token=2b67fba7-6df6-4c3a-9d43-7248008b8fa3" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Shipping zone created
{% endhint %}

{% hint style="danger" %}
The shipping zone was successfully created
{% endhint %}

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FFaGZVCrfCLeIAg6lUOz3%2FSnackbar%20Example%202.png?alt=media&amp;token=b4fc1adc-2f9a-445f-a649-320dc65b83c3" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Product creation failed
{% endhint %}

{% hint style="danger" %}
Couldn't create this product
{% endhint %}

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.

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/feedback/snackbar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
