Snackbars

Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.

The most effective way to use the Snackbar component is to have a global snackbar that gets toasts pushed to it through some state framework (such as Redux).

NOTE: The snackbar does a shallow compare of the toasts prop and will dismiss/hide toasts based on if it is not shallow equal. Defining the toasts on the component or in the render might have unexpected results of duplicate toasts.

The Snackbar will have an alert role when no action is specified and an alertdialog role when an action has been provided to the toast. These roles have been added to help screen readers get notified of the alerts. More info: alert role

To create a new toast in the snackbar, you must create an object for displaying the toast. The object must contain a text key and then an optional action key. The action can either be a string, number, or an object of props to provide to a button.

This following example will allow you to set different props on the Snackbar and see how it affects the resulting toast.