Snackbar React-only

Open in Storybook Open in Figma

A Snackbar item informs the customer of a process that is performing or has been performed in George. It appears temporary (or until customer dismisses it) towards the bottom of the browser window and shouldn’t interrupt the user experience. The message within a Snackbar item has a maximum of three lines.
There can be an infinite number of Snackbar items, but it is considered best practice to limit the frequency and amount of Snackbar items to a minimum.

Loading demo…

Use a Snackbar item to inform about a process in the application.

Don’t

Don’t use a Snackbar item for promotional purposes (e.g. informing about a product or feature).

Rules For Developers

When using a button in a SnackbarItem, make sure to use SnackbarButton component in the button property to get proper styling.

Types of items

A Snackbar item is available in the following variations:

Autodismissive or sticky (until customer dismisses it)
With or without button (CTA)

To see different Snackbar items in use, take a look at the interactive example below:

Loading demo…

Anatomy

A Snackbar item consist of the following (optional) elements:

Indicator icon (optional, enable through variant SUCCESS/ERROR/BUSY)
Action button (optional)
Content (text string, maximum of three lines)
Close button