Toast Options

import { Toaster } from "@pheralb/toast";
 
<Toaster toastOptions={{}} />;

font

By default, the font of the toasts is:

ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

You can change this value using the font property. In this case, we are using the utility class font-sans from Tailwind CSS to set the font:

<Toaster
  toastOptions={{
    font: "font-sans",
  }}
/>

icons

@pheralb/toast use Phosphor Icons by default. You can change the default icons for all toasts using icons property:

import { Info, CircleX, CircleAlert, CircleCheck, Loader } from "lucide-react";
 
<Toaster
  toastOptions={{
    icons: {
      info: <Info className="dark:text-blue-500" />,
      error: <CircleX className="text-red-500" />,
      warning: <CircleAlert className="text-yellow-500" />,
      success: <CircleCheck className="text-green-500" />,
      loading: <Loader className="animate-spin text-gray-500" />,
    },
  }}
/>;

💡 To modify the icon of a single toast: toast - Custom Icon

animationOnClose

By default, the animation when closing a toast is slide (slide-down or slide-up). You can change this value using the animationOnClose property:

Actions buttons

• defaultActionContent: Default content for the action button. It can be a string or a ReactNode.

<Toaster
  toastOptions={{
    defaultActionContent: "Close me",
  }}
/>

💡 To modify the action button of a single toast: toast - toast.variant with action

• defaultCloseContent: Default content for the close button. It can be a string or a ReactNode.

<Toaster
  toastOptions={{
    defaultCloseContent: "Close",
  }}
/>

classNames

You can extend the default styles of the toasts using the classNames property. For example, to change the background color of the toasts using Tailwind CSS:

<Toaster
  toastOptions={{
    classNames: {
      toast: "bg-zinc-100 dark:bg-zinc-900",
    },
  }}
/>

headless

Disable all default styles using headless property. It works together with classNames. For example, to create a custom toast with Tailwind CSS:

💡 View the example on GitHub.

API Reference

• toastOptions from <Toaster /> accepts the following properties:

• classNames from toastOptions accepts the following properties: