Skip to content


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


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.

<Snackbar />


The duration to be shown (in ms)


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


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.

Press Enter to start editing



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


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


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.

  onClose={(event, reason) => {
    if (reason === 'clickaway') {


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.


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


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