Skip to content
+

Snackbar

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

  • Feedback
  • Bundle size
Component demosComponents APIHooks API

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:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSnackbarRootSlotProps<ExternalProps>


onClickAway

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

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



Edit this page

Was this page helpful?


TooltipAccordion

Blog

Store