Snackbar

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

useSnackbar API

Import

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

Learn about the difference by reading this guide on minimizing bundle size.

Parameters

autoHideDuration

The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar. This behavior is disabled by default with the null value.

Type:

number | null

Default:

null

disableWindowBlurListener

If true, the autoHideDuration timer will expire even if the window is not focused.

Type:

boolean

Default:

false

onClose

Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway.

Type:

(event: React.SyntheticEvent<any> | Event | null, reason: SnackbarCloseReason) => void

open

If true, the component is shown.

Type:

boolean

resumeHideDuration

The number of milliseconds to wait before dismissing after user interaction. If autoHideDuration prop isn't specified, it does nothing. If autoHideDuration prop is specified but resumeHideDuration isn't, we default to autoHideDuration / 2 ms.

Type:

number

Return value

getRootProps

Resolver for the root slot's props.

Type:

<TOther extends Record<string, ((event: any) => void) | undefined> = {}>(externalProps?: TOther) => UseSnackbarRootSlotProps<TOther>

onClickAway

Callback fired when a "click away" event is detected.

Type:

(event: React.SyntheticEvent<any> | Event) => void