Skip to content
Edit this page

Snackbars

Snackbars provide brief messages about app processes. The component is also known as a toast.

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. You can use them to display notifications.

Frequency

Only one snackbar may be displayed at a time.

Simple snackbars

A basic snackbar that aims to reproduce Google Keep's snackbar behavior.

Customized snackbars

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

Positioned snackbars

There may be circumstances when the placement of the snackbar needs to be more flexible.

Message Length

Some snackbars with varying message length.

Transitions

Consecutive Snackbars

When multiple snackbar updates are necessary, they should appear one at a time.

Snackbars and floating action buttons (FABs)

Snackbars should appear above FABs (on mobile).

Change Transition

Grow is the default transition but you can use a different one.

<Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
<Button onClick={handleClick(Fade)}>Fade Transition</Button>
<Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
<Snackbar
  open={state.open}
  onClose={handleClose}
  TransitionComponent={state.Transition}
  ContentProps={{
    'aria-describedby': 'message-id',
  }}
  message={<span id="message-id">I love snacks</span>}
/>

Control Slide direction

You can change the direction of the Slide transition.

<Button onClick={handleClick(TransitionLeft)}>Right</Button>
<Button onClick={handleClick(TransitionUp)}>Up</Button>
<Button onClick={handleClick(TransitionRight)}>Left</Button>
<Button onClick={handleClick(TransitionDown)}>Down</Button>
<Snackbar
  open={open}
  onClose={handleClose}
  TransitionComponent={transition}
  ContentProps={{
    'aria-describedby': 'message-id',
  }}
  message={<span id="message-id">I love snacks</span>}
/>

Complementary projects

For more advanced use cases you might be able to take advantage of:

notistack

stars npm downloads

We demonstrate how to use notistack. notistack has an imperative API that makes it easy to display toasts (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another (although this is discouraged by the Material Design specification).

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert)

  • Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to alert through the SnackbarContent role prop. This is the default role.
  • If a Snackbar requires focus to close it, then content authors should use the role of alertdialog.
<SnackbarContent
  message="This is a Snackbar message."
  role="alert"
/>
<Snackbar
  ContentProps={{
    'aria-describedby': 'snackbar-fab-message-id',
    'role': 'alertdialog',
  }}
  message={<span id="snackbar-fab-message-id">Archived</span>}
  action={
    <Button color="inherit" size="small">
      Undo
    </Button>
  }
/>

API