# Snackbar

## 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&#x26;token=44ecca59-0915-4e5f-9152-f3d92abb46bb" alt=""><figcaption></figcaption></figure>

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. \
\&#xNAN;*For example: 'Item added' or 'Item deleted'*

Snackbar should not be used to display critical information; use [alerts](https://design.mirakl.com/design/components/feedback/alerts) instead.\
\&#xNAN;*For example: 'You cannot perform this action because your profile has not been verified'*

## Design guidelines

Snackbars can only have one [button](https://design.mirakl.com/design/components/actions/buttons).

{% hint style="info" %}
**Prototyping a Snackbar on Figma for designers**<br>

* Trigger : onClick **OR** onDelay - 50ms
* Animation type : Custom Spring
* Duration: 300ms
  {% endhint %}

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

<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&#x26;token=2b67fba7-6df6-4c3a-9d43-7248008b8fa3" alt="" width="563"><figcaption></figcaption></figure>

**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**

{% hint style="info" %}
**Template**: Object + verb+ED
{% endhint %}