Snackbar

A transient message in a corner of the window, through a Portal.

A transient message in a corner of the window, through a Portal. It hides itself after autoHideDuration - the clock stops while the pointer or the focus is on it, and starts again for resumeHideDuration once they leave - and asks to close on Escape and on a click away, onClose told why. It is a role="status", announced politely, and never takes the focus. Several at once do not stack: the app queues them.

import { Snackbar } from '@soroush.tech/design-system/Snackbar'

;<Snackbar
  isOpen={isOpen}
  onClose={(_event, reason) => reason !== 'clickaway' && setIsOpen(false)}
  autoHideDuration={4000}
  message="Saved"
  action={<Button variant="text">Undo</Button>}
/>

Examples

Default

const args: Partial<SnackbarProps> = { message: 'Saved', autoHideDuration: 4000 }

<Demo {...args} />

With An Action

const args: Partial<SnackbarProps> = { message: 'Message archived', autoHideDuration: 6000 }

<Demo
  {...args}
  action={
    <Button variant="text" size="sm">
      Undo
    </Button>
  }
/>

Stays Until Closed

const args: Partial<SnackbarProps> = { message: 'Connection lost.' }

<Demo
  {...args}
  action={
    <Button variant="text" size="sm">
      Retry
    </Button>
  }
/>

Corners

const args: Partial<SnackbarProps> = { isOpen: true, message: 'Saved', autoHideDuration: 4000 }

<Flex flexDirection="row" gap={1}>
  {snackbarVerticalValues.flatMap((vertical) =>
    snackbarHorizontalValues.map((horizontal) => (
      <Demo
        key={`${vertical}-${horizontal}`}
        {...args}
        isOpen={undefined}
        autoHideDuration={3000}
        message={`${vertical} ${horizontal}`}
        anchorOrigin={{
          vertical: vertical as 'top' | 'bottom',
          horizontal: horizontal as 'start' | 'center' | 'end',
        }}
      />
    ))
  )}
</Flex>

With An Alert

const args: Partial<SnackbarProps> = { message: 'Saved', autoHideDuration: 5000 }

<Demo {...args} message={undefined}>
  <Alert severity="success">Your changes were saved.</Alert>
</Demo>

Sliding In

const args: Partial<SnackbarProps> = { message: 'Sliding in', autoHideDuration: 4000 }

<Demo {...args} transition={SlideUp} />