Toast

Toast has 2 exports, the ToastProvider component which is the container for all the notifications and the toast function that allows triggering the notification. It sets all the default behaviour, like pausing on hover and positioning and styles the different types of notification (blank (default), error and success).

This is the preferred user feedback way as it is not intrusive and it simply provides some state information to the user without waiting for feedback, ie: the information was saved. When feedback is required consider using the AlertDialog component.

<ToastProvider>
  <Button onClick={() => toast.success('This is the toast message')}>
    Click for toast
  </Button>
</ToastProvider>

This component can render a string message by default. However, it can be overriden to show more complex component structure Render more than a string. For more information on other configuration options and props, please read about the underlying behaviour at react-hot-toast