Toast

A flexible toast notification component built on top of Sonner with customizable styling and comprehensive functionality.

import { toast } from "@/components/ui/Toast";

<Button
  onClick={() => {
    toast("Hello World!", {
      description: "This is a basic toast notification.",
    });
  }}
>
  Show Toast
</Button>

This drawer component is built on top of Sonner created by Emil Kowalski

Installation

Install following dependencies:

npm install sonner class-variance-authority

pnpm add sonner class-variance-authority

yarn add sonner class-variance-authority

bun add sonner class-variance-authority

Copy and paste the following code into your project.

components/ui/Toast/toast.tsx

"use client";

import * as React from "react";
import { Toaster as Sonner } from "sonner";
import { cva, type VariantProps } from "class-variance-authority";

const Toaster = ({ ...props }) => {
  return (
    <Sonner
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-[hsl(var(--hu-card))] group-[.toaster]:text-[hsl(var(--hu-foreground))] group-[.toaster]:border-[hsl(var(--hu-border))] group-[.toaster]:rounded-[var(--radius)] group-[.toaster]:p-4",
          description:
            "group-[.toast]:text-[hsl(var(--hu-muted-foreground))] group-[.toast]:text-sm",
          actionButton:
            "group-[.toast]:bg-[hsl(var(--hu-primary))] group-[.toast]:text-[hsl(var(--hu-primary-foreground))] group-[.toast]:rounded-[var(--radius)] group-[.toast]:px-3 group-[.toast]:py-1.5",
          cancelButton:
            "group-[.toast]:bg-[hsl(var(--hu-accent))] group-[.toast]:text-[hsl(var(--hu-accent-foreground))] group-[.toast]:rounded-[var(--radius)] group-[.toast]:px-3 group-[.toast]:py-1.5",
        },
      }}
      {...props}
    />
  );
};

export { Toaster };

components/ui/Toast/use-toast.ts

import { toast as sonnerToast } from "sonner";

const toast = (message, data) => {
  return sonnerToast(message, data);
};

toast.success = (message, data) => sonnerToast.success(message, data);
toast.error = (message, data) => sonnerToast.error(message, data);
toast.warning = (message, data) => sonnerToast.warning(message, data);
toast.info = (message, data) => sonnerToast.info(message, data);
toast.loading = (message, data) => sonnerToast.loading(message, data);
toast.dismiss = (id) => sonnerToast.dismiss(id);

export { toast };

Add the Toaster component to your app layout:

app/layout.tsx

import { Toaster } from "@/components/ui/Toast";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

npx hextaui@latest add toast

pnpm dlx hextaui@latest add toast

yarn dlx hextaui@latest add toast

bun x hextaui@latest add toast

Usage

import { toast } from "@/components/ui/Toast";

toast("Hello World!");

Examples

Variants

toast.success("Success!"); toast.warning("Warning");
toast.info("Information"); ```
</Tab>
</Tabs>

### With Action

<Tabs items={["Preview", "Code"]}>
<Tab value="Preview">
<PreviewContainer>
  <ToastWithAction />
</PreviewContainer>
</Tab>
<Tab value="Code">
```tsx
toast("Event scheduled", {
  description: "Your meeting is scheduled for tomorrow at 10 AM.",
  action: {
    label: "View",
    onClick: () => {
      toast("Viewing event details");
    },
  },
});

With Cancel

toast("File will be deleted", {
  description: "This action cannot be undone.",
  cancel: {
    label: "Cancel",
    onClick: () => {
      toast("Deletion cancelled");
    },
  },
  action: {
    label: "Delete",
    onClick: () => {
      toast.success("File deleted successfully");
    },
  },
});

Loading State

const loadingToast = toast.loading("Uploading file...");

setTimeout(() => {
  toast.dismiss(loadingToast);
  toast.success("Upload complete!");
}, 2000);

Promise

toast.promise(apiCall(), {
  loading: "Saving data...",
  success: "Data saved successfully",
  error: "Failed to save data",
});

Custom Duration

toast("Quick message", { duration: 1000 });
toast("Persistent message", { duration: 10000 });
toast("Infinite message", { duration: Infinity });

Props

Prop	Type	Default
`id?`	`string \| number`	`undefined`
`duration?`	`number`	`4000`
`cancel?`	`{ label: string; onClick?: () => void }`	`undefined`
`action?`	`{ label: string; onClick: () => void }`	`undefined`
`description?`	`string`	`undefined`
`title?`	`string`	`undefined`