Passer au contenu

🎉 Material UI v5 is out now! Check out the announcement blog post

Snackbar (Message rapide)

Snackbars provide brief messages about app processes. The component is also known as a toast.

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. You can use them to display notifications.

Fréquence

Only one snackbar may be displayed at a time.

Simple snackbars

A basic snackbar that aims to reproduce Google Keep's snackbar behavior.

Customized snackbars

Here are some examples of customizing the component. Vous pouvez en savoir plus dans la page de documentation des overrides.

<Button variant="outlined" onClick={handleClick}>
  Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="success">
    This is a success message!
  </Alert>
</Snackbar>
<Alert severity="error">This is an error message!</Alert>
<Alert severity="warning">This is a warning message!</Alert>
<Alert severity="info">This is an information message!</Alert>
<Alert severity="success">This is a success message!</Alert>

Positioned snackbars

In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen, however there may be circumstances where the placement of the snackbar needs to be more flexible. You can control the position of the snackbar by specifying the anchorOrigin prop.

{buttons}
<Snackbar
  anchorOrigin={{ vertical, horizontal }}
  open={open}
  onClose={handleClose}
  message="I love snacks"
  key={vertical + horizontal}
/>

Longueur du message

Some snackbars with varying message length.

<SnackbarContent message="I love snacks." action={action} />
<SnackbarContent
  message={
    'I love candy. I love cookies. I love cupcakes. \
    I love cheesecake. I love chocolate.'
  }
/>
<SnackbarContent message="I love candy. I love cookies. I love cupcakes." action={action} />
<SnackbarContent
  message={
    'I love candy. I love cookies. I love cupcakes. \
    I love cheesecake. I love chocolate.'
  }
  action={action}
/>

Les transitions

Snackbars consécutifs

When multiple snackbar updates are necessary, they should appear one at a time.

Snackbars and floating action buttons (FABs)

Snackbars should appear above FABs (on mobile).

Changer la transition

Grow is the default transition but you can use a different one.

<Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
<Button onClick={handleClick(Fade)}>Fade Transition</Button>
<Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
<Snackbar
  open={state.open}
  onClose={handleClose}
  TransitionComponent={state.Transition}
  message="I love snacks"
  key={state.Transition.name}
/>

Control Slide direction

You can change the direction of the Slide transition.

<Button onClick={handleClick(TransitionLeft)}>Right</Button>
<Button onClick={handleClick(TransitionUp)}>Up</Button>
<Button onClick={handleClick(TransitionRight)}>Left</Button>
<Button onClick={handleClick(TransitionDown)}>Down</Button>
<Snackbar
  open={open}
  onClose={handleClose}
  TransitionComponent={transition}
  message="I love snacks"
  key={transition ? transition.name : ''}
/>

Projets complémentaires

Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des avantages suivants:

notistack

stars npm downloads

This example demonstrates how to use notistack. notistack has an imperative API that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to stack them on top of one another (although this is discouraged by the Material Design specification).

Accessibilité

(WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert)

  • By default, the snackbar won't auto-hide. However, if you decide to use the autoHideDuration prop, it's recommended to give the user sufficient time to respond.