Snackbar component is used for brief notifications (also known as toasts) of processes that have been or will be performed.

timeout

() => {
  const Examples = useMemo(
    (): FC => () => {
      const { addSnackbar, closeSnackbar } = useSnackbar();

      const actions = (key: string) => (
        <Button
          onClick={() => {
            closeSnackbar(key);
          }}
          variant="inverted"
        >
          Learn more
        </Button>
      );

      return (
        <Grid gap={8}>
          <Button variant="secondary" onClick={() => addSnackbar({ message: 'Default Snack' })}>
            Default snack
          </Button>
          <Button
            variant="secondary"
            onClick={() => addSnackbar({ message: 'Error Snack', variant: 'danger', actions, close: true })}
          >
            Error snack
          </Button>
          <Button
            variant="secondary"
            onClick={() => addSnackbar({ message: 'Success Snack', variant: 'success', close: true, actions })}
          >
            Success snack
          </Button>
          <Button variant="secondary" onClick={() => addSnackbar({ message: 'Snack with icon', icon: IconDownload })}>
            Snack with icon
          </Button>
          <Button variant="secondary" onClick={() => addSnackbar({ message: 'Persistent snack', persist: true, close: true })}>
            Persistent snack
          </Button>
          <Button variant="secondary" onClick={() => addSnackbar({ message: 'Unique messages', unique: true })}>
            Unique message
          </Button>
          <Button variant="secondary" onClick={() => addSnackbar({ message: 'With close action', close: true })}>
            Snack with close action
          </Button>
          <Button variant="secondary" onClick={() => addSnackbar({ message: 'Custom action snack', actions })}>
            Snack with custom actions
          </Button>
          <Button
            variant="secondary"
            onClick={() => addSnackbar({ variant: 'loading', message: 'Loading…', narrow: true }, true)}
          >
            Loading snack
          </Button>
          <Button
            variant="secondary"
            onClick={() =>
              addSnackbar({
                type: 'banner',
                illustration: <img src="/placeholders/banner-illustration.svg" loading="lazy" alt="survey" height={128} />,
                title: 'Join the AI Conversation',
                message: 'Complete Our Survey for a Chance at $25!',
                actions
              })
            }
          >
            Banner snack
          </Button>
        </Grid>
      );
    },
    []
  );

  return (
    <Box width={200}>
      <Snackbar max={5}>
        <Examples />
      </Snackbar>
    </Box>
  );
}

Name	Description	Default
max	Snackbar max display message count	-
timeout	Default message hide timeout	-