Snackbar API

The API documentation of the Snackbar React component. Learn more about the properties and the CSS customization points.

import Snackbar from '@material-ui/core/Snackbar';

Props

Name	Type	Default	Description
action	node		The action to display.
anchorOrigin	{ horizontal: enum: 'left' \| 'center' \| 'right' , vertical: enum: 'top' \| 'bottom' }	{ vertical: 'bottom', horizontal: 'center',}	The anchor of the `Snackbar`.
autoHideDuration	number		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.
children	element		Replace the `SnackbarContent` component.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
ClickAwayListenerProps	object		Properties applied to the `ClickAwayListener` element.
ContentProps	object		Properties applied to the `SnackbarContent` element.
disableWindowBlurListener	bool	false	If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
key	any		When displaying multiple consecutive Snackbars from a parent rendering a single <Snackbar/>, add the key property to ensure independent treatment of each message. e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled.
message	node		The message to display.
onClose	func		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`. Signature: `function(event: object, reason: string) => void` event: The event source of the callback reason: Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"`
onEnter	func		Callback fired before the transition is entering.
onEntered	func		Callback fired when the transition has entered.
onEntering	func		Callback fired when the transition is entering.
onExit	func		Callback fired before the transition is exiting.
onExited	func		Callback fired when the transition has exited.
onExiting	func		Callback fired when the transition is exiting.
open	bool		If true, `Snackbar` is open.
resumeHideDuration	number		The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms.
TransitionComponent	Component	Slide	The component used for the transition.
transitionDuration	union: number \| { enter?: number, exit?: number }	{ enter: duration.enteringScreen, exit: duration.leavingScreen,}	The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
TransitionProps	object		Properties applied to the `Transition` element.

Any other properties supplied will be spread to the root element (native element).

CSS

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

Name	Description
root	Styles applied to the root element.
anchorOriginTopCenter	Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`.
anchorOriginBottomCenter	Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`.
anchorOriginTopRight	Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`.
anchorOriginBottomRight	Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`.
anchorOriginTopLeft	Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`.
anchorOriginBottomLeft	Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`.

Have a look at overriding with classes section and the implementation of the component for more detail.

If using the overrides key of the theme, you need to use the following style sheet name: MuiSnackbar.

Demos

Snackbars