Toast

toast is a toast component that is used to display notifications to the user. It is handled by Toaster component, that is added in the root of the app.

To show a simple toast, use the toast function.

  toast({
    title: 'Toast title',
    description: 'Toast description',
    options: {
    /**
     * If duration is not provided,
     * the toast will be closed after 10 seconds by default.
     */
      duration: 5000,
      dismissible: true,
      action: {
        label: 'Undo',
        onClick: () => {
          console.log('Undo')
        }
      }
    }
  })

Toast types

toast can be used to show different types of toasts.

1. - Default toast (toast)
2. - Success toast (toast.success)
3. - Danger toast (toast.danger)
4. - Info toast (toast.info)
5. - Loading toast (toast.loading)
6. - Promise toast (toast.promise)

Points to Note

1. Maximum number of toasts that can be displayed at a time is 3.
2. - If duration is not provided, the toast will be closed after 10 seconds by default.
3. - Close button in toast will be hidden only if dismissible is set to false in options. By default, it is set to true.
4. - Action button can be added to toast by providing action in options.
5. - Clicking of action button will execute the callback function provided in action and will not close the toast by default. If you want to close the toast after clicking the action button, you can use toast.dismiss in the callback function.
6. - Promise toast and Loading toast cannot be dismissed by the user, it will be closed after the promise is resolved or rejected (Promise toast) or when the work in progress task is completed (Loading toast).
7. - Promise toast and Loading toast cannot display a description

Usage

Success toast

Danger toast

Info toast

Loading toast

Caution

Loading toast needs to be closed manually. use toast.dismiss to close the toast using the toast id.

Promise toast

Promise toast accepts a promise as its first argument and an options object as its second argument.

Caution

Promise toast cannot be dismissed by the user, it will be closed after 7 seconds when the promise is resolved or rejected.

Toast params

Toast params are the parameters that are passed to the toast function.

Prop	Required	Default	Type
title	true		string
options	false		ToastOptions
description	false		ReactNode
loadingMessage	true		string
successMessage	false		string
errorMessage	false		string

Toast options

Toast options are the configuration object that are passed to the toast parameter.

Prop	Required	Default	Type
duration	false		number
action	false		Action
dismissible	false		boolean