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 the SnackbarButton component in the button property to get proper styling.

Rules For Accessibility

The Snackbar area is a region landmark that gets its title from LanguageProvider’s page.notifications.title entry, which ideally will be labelled “Notifications”.
Sticky SnackbarItems will reside in the Snackbar area until dismissed, hence the region is there to inform the user that those items are notifications from the application.
In addition, screen readers announce page.notifications.empty when the user navigates to the Snackbar region and it has no entries.

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