Notistack npm library documentation website logo


Placement of Snackbars can be adjusted horizontally and vertically depending on application needs. As a general rule, Snackbars should be placed in front of app content and distant from frequent touch points or navigation elements.

By default, notistack displays Snackbars on the bottom-left corner of the screen; however, there are scenarios where more flexibility is needed. For example, in the case of rtl languages such as Farsi or Arabic, you may want to position Snackbars on bottom-right corner of the screen. Placement can be configured usinganchorOrigin prop.

Pro tip: Be consistent in where you place Snackbars across the app.

    vertical: 'bottom',
    horizontal: 'left',
  <App />

const message = 'Your notification here';
enqueueSnackbar(message, {
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'left'

Set dense to true to have less margins for your Snackbars. This prop is recommended for displaying snackbars on devices with smaller screen sizes (e.g. mobile devices).

  <App />