Function PromptSnackbar

PromptSnackbar(props: PromptSnackbarProps): Element

The bottom-of-screen notice shared by the update prompts: a filled info alert with one action and a ✕.

It has no auto-hide timeout — a popup can be open for a second or two, so a timed dismissal would routinely never be seen. It closes only on an explicit action.

Parameters

props: PromptSnackbarProps
The snackbar props (see PromptSnackbarProps).

Returns Element

The rendered snackbar.

Component

Example

<PromptSnackbar
  open
  message="Chem Pal v1.3.0 is available."
  actionLabel="What's new"
  onAction={openNotes}
  onDismiss={dismiss}
  dismissLabel="Dismiss"
  testId="update-snackbar"
/>

Source

export function PromptSnackbar({
  open,
  message,
  actionLabel,
  onAction,
  onDismiss,
  dismissLabel,
  testId,
  actionTestId,
  dismissTestId,
}: PromptSnackbarProps) {
  return (
    <Snackbar
      data-testid={testId}
      open={open}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      className={styles['prompt-snackbar']}
    >
      <Alert
        severity="info"
        variant="filled"
        // Alert drops its own close button as soon as `action` is set, so the
        // dismiss control has to be composed in here alongside the CTA.
        action={
          <>
            <Button data-testid={actionTestId} color="inherit" size="small" onClick={onAction}>
              {actionLabel}
            </Button>
            <IconButton
              data-testid={dismissTestId}
              aria-label={dismissLabel}
              color="inherit"
              size="small"
              onClick={onDismiss}
            >
              <CloseIcon fontSize="inherit" />
            </IconButton>
          </>
        }
      >
        {message}
      </Alert>
    </Snackbar>
  );
}