Snackbar

Snackbars fornecem mensagens breves sobre os processos de aplicativos. O componente também é conhecido como toast(torrada).

Snackbars informam aos usuários de um processo que a aplicação realizou ou irá executar. Eles aparecem temporariamente, na parte inferior da tela. They shouldn't interrupt the user experience, and they don't require user input to disappear.

Snackbars contêm uma única linha de texto diretamente relacionada à operação realizada. Eles podem conter uma ação de texto, mas não ícones. Você pode usá-los para exibir notificações.

Apenas um snackbar pode ser exibido por vez.

Snackbars simples

Um snackbar básico que tem como objetivo reproduzir o comportamento do Google Keep's snackbar.

<Button onClick={handleClick}>Open simple snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="Note archived"
  action={action}
/>

<Button onClick={handleClick}>Open simple snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="Note archived"
  action={action}
/>

Press Enter to start editing

Snackbars customizados

Aqui estão alguns exemplos de customização do componente. You can learn more about this in the overrides documentation page.

This is an error message!

This is a warning message!

This is an information message!

This is a success message!

<Button variant="outlined" onClick={handleClick}>
  Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
    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>

<Button variant="outlined" onClick={handleClick}>
  Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
    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>

Press Enter to start editing

Snackbars posicionados

Em leiautes amplos, os snackbars podem ser alinhados para a esquerda ou alinhados ao centro se forem colocados consistentemente no mesmo lugar na parte inferior da tela, no entanto, pode haver circunstâncias em que a posição do snackbar tenha de ser mais flexível. Você pode controlar a posição do snackbar especificando a propriedade anchorOrigin.

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

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

Press Enter to start editing

Comprimento da mensagem

Alguns snackbars com tamanho variável de mensagem.

I love snacks.

I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate.

I love candy. I love cookies. I love cupcakes.

I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate.

Transições

Snackbars Consecutivos

Quando várias atualizações de snackbar são necessárias, eles devem aparecer um por vez.

Snackbars e botões de ação flutuante (BAFs)

Snackbars devem aparecer acima de BAFs (no mobile).

Modificando a transição

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}
/>

<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}
/>

Press Enter to start editing

Controlando a direção do Slide

You can change the direction of the Slide transition.

Example of making the slide transition to the left:

import Slide from '@mui/material/Slide';

function TransitionLeft(props) {
  return <Slide {...props} direction="left" />;
}

export default function MyComponent() {
  return <Snackbar TransitionComponent={TransitionLeft} />;
}

Para situações de uso mais avançadas, você pode tirar proveito com:

<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 : ''}
/>

<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 : ''}
/>

Press Enter to start editing

Projetos Complementares

For more advanced use cases you might be able to take advantage of:

notistack

npm downloads

Este exemplo demonstra como usar com notistack. notistack tem uma API imperativa que facilita a exibição de snackbars, sem ter que lidar com seu estado de aberto/fechado. It also enables you to stack them on top of one another (although this is discouraged by the Material Design guidelines).

Acessibilidade

(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.

When open, every Snackbar will be dismissed if Escape is pressed. Unless you don't handle onClose with the "escapeKeyDown" reason. If you want to limit this behavior to only dismiss the oldest currently open Snackbar call event.preventDefault in onClose.

export default function MyComponent() {
  const [open, setOpen] = React.useState(true);

  return (
    <React. Fragment>
      <Snackbar
        open={open}
        onClose={(event, reason) => {
          // `reason === 'escapeKeyDown'` if `Escape` was pressed
          setOpen(false);
          // call `event.preventDefault` to only close one Snackbar at a time.
        }}
      />
      <Snackbar open={open} onClose={() => setOpen(false)} />
    </React. Fragment>
  );
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.