Snackbar

The Snackbar, also commonly referred to as Toast, component informs users that an action has been or will be performed by the app.

Introduction

Snackbars are designed to provide brief, non-intrusive notifications to users, informing them about processes an app has performed or will perform.

By default, the snackbar is displayed in the lower-right corner of the screen. They are designed not to disrupt the user's workflow and can be dismissed automatically without the need of any user interaction.

Snackbars contain a single line of text directly related to the operation performed. They can contain text actions, but no icons.

Basics

import Snackbar from '@mui/joy/Snackbar';

Position

The position of the snackbar can be controlled by specifying the anchorOrigin prop.

In wider layouts, snackbars can be aligned to the left or centered, especially if they are consistently positioned in a specific location at the bottom of the screen. However, in some cases, you may need more flexible positioning.

Customization

Variants

The Snackbar component supports Joy UI's four global variants: plain, outlined (default), soft, and solid.

Sizes

The Snackbar component comes in three sizes: sm, md (default), and lg.

Colors

Every palette included in the theme is available via the color prop. Play around combining different colors with different variants.

Hide duration

Use autoHideDuration prop to control how long the Snackbar is displayed. If it is not provided, the Snackbar will be displayed until the user dismisses it.

Close reason

There are three reasons for the Snackbar to close:

• timeout: The Snackbar is closed after the autoHideDuration prop timer expires.
• clickaway: The Snackbar is closed when the user interacts outside of the Snackbar.
• escapeKeyDown: The Snackbar is closed when the user presses the escape key.

You can access the value from the second argument of the onClose callback.

<Snackbar onClose={(event, reason) => {
  // reason will be one of: timeout, clickaway, escapeKeyDown
}}>

Ignore clickaway

This pattern is useful when you don't want the Snackbar to close when the user clicks outside of it.

<Snackbar
  onClose={(event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
  }}
>

Decorators

Use the startDecorator and endDecorator props to append icons and/or actions to either side of the Snackbar.

Inverted colors

When the Snackbar's variant is soft or solid, you can set invertedColors prop to true to invert the colors of the children for increasing the contrast.

To learn more about this, check out Color Inversion feature.

Animation

To apply a custom animation, provide the animationDuration prop, which we'll use to match the component's unmount animation accurately.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Snackbar />