Unstyled Snackbar

Introduction

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

The Unstyled 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 SnackbarUnstyled from '@mui/base/SnackbarUnstyled';

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

Basics

Unstyled 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 Unstyled Snackbar. Click Open snackbar to see how it behaves:

Anatomy

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

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

Slot props

Use the component prop to override the root slot with a custom element:

<SnackbarUnstyled component="span" />

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 Unstyled 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:

SnackbarUnstyled API

Import

import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
// or
import { SnackbarUnstyled } from '@mui/base';

Props

Props of the native component are also available.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

You can override the style of the component using one of these customization options: