Snackbars with actions

The purpose of Material-UI snackbars is to display brief messages for the user. Additionally, you can embed the next course of action for the user in the snackbar.

How to do it...

Let's say that you want a simple button in your snackbar that closes the snackbar. This could be useful for closing the snackbar before it automatically closes. Alternatively, you might want to require the user to explicitly acknowledge the message by having to close it manually. Here's the code to add a close button to a Snackbar component:

import React, { Fragment, useState } from 'react';
import { Route, Link } from 'react-router-dom';

import Snackbar from '@material-ui/core/Snackbar&apos...