Toast

Toasts are brief notifications that appear temporarily to communicate a short message or feedback to the user.

Usage

To use the Toast component in your application:

function Toast() {
  const [openToast, ToastProvider] = useToast();
  const triggerNotification = (placement) => {
    openToast({
      variant: 'translucent',
      iconPrepend: <Icon type={'AlertCircle'} size={'medium'} />,
      message: 'This is toast.',
      duration: 3000,
      placement: placement,
    });
  };
  return (
    <>
      {ToastProvider}
      <Flex direction={'column'} space={4} width={'100%'} height={'100%'}>
        <Flex direction={'row'} justify={'center'} space={4}>
          <Button variant="ghost" onClick={() => triggerNotification('topLeft')}>
            Top Left
          </Button>
          <Button variant="ghost" onClick={() => triggerNotification('topRight')}>
            Top Right
          </Button>
        </Flex>
        <Flex direction={'row'} justify={'center'} space={4}>
          <Button variant="ghost" onClick={() => triggerNotification('bottomLeft')}>
            Bottom Left
          </Button>
          <Button variant="ghost" onClick={() => triggerNotification('bottomRight')}>
            Bottom Right
          </Button>
        </Flex>
      </Flex>
    </>
  );
}

API

Props