Skip to content
Edit this page
+

Snackbar

The Snackbar component informs users that an action has been or will be performed by the app.

DemosComponents APIHooks API

Introduction

A snackbar provides users with a brief, temporary message about app processes without interrupting their activity or experience.

The Snackbar component is built to appear on-screen to inform users about an action that the app is taking.

Component

Usage

After installation, you can start building with this component using the following basic elements:

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

export default function MyApp() {
  return <Snackbar>{/* snackbar text */}</Snackbar>;
}

Basics

Snackbar doesn't impose any restrictions on its implementation—it's up to you to design it so that it doesn't interrupt the user experience, and disappears after a set amount of time without requiring the user to take action.

Use the autoHideDuration prop to set the time (in milliseconds) that the snackbar remains on the screen.

The following demo illustrates the basic usage of Snackbar. Click Open snackbar to see how it behaves:

Anatomy

The Snackbar component is composed of a single root <div> slot with no interior slots:

<div role="presentation" className="BaseSnackbar-root">snackbar content</div>

Custom structure

<Snackbar slots={{ root: 'span' }} />

Usage with TypeScript

In TypeScript, you can specify the custom component type used in the slots.root as a generic to the unstyled component. This way, you can safely provide the custom component's props directly on the component:

<Snackbar<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

The same applies for props specific to custom primitive elements:

<Snackbar<'button'> slots={{ root: 'button' }} onClick={() => {}} />

Hook

import useSnackbar from '@mui/base/useSnackbar';

The useSnackbar hook lets you apply the functionality of a snackbar to a fully custom component.

It returns props to be placed on the custom component, along with fields representing the component's internal state.

Hooks do not support slot props, but they do support customization props.

If you use a Click-Away Listener to let the user close the snackbar by clicking outside of it, make sure to pass the onClickAway handler returned by this hook to the Click-Away Listener.

Pass the open state to the hook and use it to show and hide the snackbar.

The demo below shows how to build a fully custom component with the useSnackbar hook that also incorporates the Click-Away Listener component:

Customization

Transitions

You can animate the open and close states of the snackbar with a render prop child and a transition component, as long as the component meets these conditions:

  • Is a direct child descendant of the snackbar
  • Has an in prop—this corresponds to the open state
  • Passes the exited prop to Snackbar
  • Calls the onEnter callback prop when the enter transition starts—sets exited to false
  • Calls the onExited callback prop when the exit transition is completed—sets exited to true

These two callbacks allow the snackbar to unmount the child content when closed and keep it fully transitioned. This is only applicable if you are using transition components using react-transition-group library internally.

The demo below shows how to create a snackbar with custom transitions: