Skip to content
github

Toast

toast is an imperative API for showing transient notifications. You call it from anywhere in your app, and the Toaster component — mounted once at the root — renders the result. To show a simple toast, call 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 show different types of toasts:

  • Default toast — toast
  • Success toast — toast.success
  • Danger toast — toast.danger
  • Info toast — toast.info
  • Loading toast — toast.loading
  • Promise toast — toast.promise

Variations

Success toast

Danger toast

Info toast

Info toast supports optional secondaryAction, ctaPosition ("top" | "bottom"), and severity ("Critical" | "High" | "Medium" | "Low"). These options are info-only. Omitting them preserves the default info toast layout and styling.

Loading toast

Promise toast

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

Installation

import { Toaster, toast } from "@harnessio/ui/components";


// Mount the Toaster once, at the root of your app
<Toaster />;


// Then call toast from anywhere
toast({
  title: "Saved",
  description: "Your changes have been saved.",
});