Toast

A succinct message that is displayed temporarily to provide feedback about an action result. Built on top of [Sonner](https://sonner.emilkowal.ski/) for an excellent toast experience.

Installation

pnpm add @helgadigitals/vera-ui

npm install @helgadigitals/vera-ui

yarn add @helgadigitals/vera-ui

Setup

Add the <Toaster /> component to your app's root layout:

// app/layout.tsx or pages/_app.tsx
import { Toaster } from "@helgadigitals/vera-ui";

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

Usage

Import the toast function and use it to display notifications:

import { toast } from "@helgadigitals/vera-ui";

function MyComponent() {
  return (
    <button onClick={() => toast("Hello World!")}>
      Show Toast
    </button>
  );
}

Examples

Basic Toast

Display a simple toast message.

components/data-display-examples/toast-examples.tsx→BasicToastExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function BasicToastExample() {
  return (
    <div className="space-y-2">
      <Button onClick={() => toast("Basic toast message")}>Show Basic Toast</Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function BasicToastExample() {  return (    <div className="space-y-2">      <Button onClick={() => toast("Basic toast message")}>Show Basic Toast</Button>    </div>  );}

Toast Types

Use different toast types to convey the appropriate message tone.

components/data-display-examples/toast-examples.tsx→ToastTypesExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function ToastTypesExample() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button onClick={() => toast.success("Success! Operation completed")}>
        Success
      </Button>
      <Button variant={'destructive'} onClick={() => toast.error("Error! Something went wrong")}>
        Error
      </Button>
      <Button variant={'secondary'} onClick={() => toast.warning("Warning! Please check your input")}>
        Warning
      </Button>
      <Button variant={'outline'} onClick={() => toast.info("Info: This is an information message")}>
        Info
      </Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function ToastTypesExample() {  return (    <div className="grid grid-cols-2 gap-2">      <Button onClick={() => toast.success("Success! Operation completed")}>        Success      </Button>      <Button variant={'destructive'} onClick={() => toast.error("Error! Something went wrong")}>        Error      </Button>      <Button variant={'secondary'} onClick={() => toast.warning("Warning! Please check your input")}>        Warning      </Button>      <Button variant={'outline'} onClick={() => toast.info("Info: This is an information message")}>        Info      </Button>    </div>  );}

Toast with Description

Add additional context with a description.

components/data-display-examples/toast-examples.tsx→ToastWithDescriptionExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function ToastWithDescriptionExample() {
  return (
    <div className="space-y-2">
      <Button 
        onClick={() => 
          toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
          })
        }
      >
        Show with Description
      </Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function ToastWithDescriptionExample() {  return (    <div className="space-y-2">      <Button         onClick={() =>           toast("Event has been created", {            description: "Sunday, December 03, 2023 at 9:00 AM",          })        }      >        Show with Description      </Button>    </div>  );}

Toast with Actions

Include action buttons for user interaction.

components/data-display-examples/toast-examples.tsx→ToastWithActionsExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function ToastWithActionsExample() {
  return (
    <div className="space-y-2">
      <Button 
        onClick={() => 
          toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
            action: {
              label: "Undo",
              onClick: () => console.log("Undo"),
            },
          })
        }
      >
        Show with Action
      </Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function ToastWithActionsExample() {  return (    <div className="space-y-2">      <Button         onClick={() =>           toast("Event has been created", {            description: "Sunday, December 03, 2023 at 9:00 AM",            action: {              label: "Undo",              onClick: () => console.log("Undo"),            },          })        }      >        Show with Action      </Button>    </div>  );}

Toast with Custom Icons

Customize the toast appearance with custom icons.

components/data-display-examples/toast-examples.tsx→ToastWithCustomIconExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function ToastWithCustomIconExample() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button 
        onClick={() => 
          toast.success("Starred!", {
            icon: <Star className="h-4 w-4" />,
          })
        }
      >
        Custom Success Icon
      </Button>
      <Button 
        onClick={() => 
          toast("You have mail!", {
            icon: <Mail className="h-4 w-4" />,
          })
        }
      >
        Custom Icon
      </Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function ToastWithCustomIconExample() {  return (    <div className="grid grid-cols-2 gap-2">      <Button         onClick={() =>           toast.success("Starred!", {            icon: <Star className="h-4 w-4" />,          })        }      >        Custom Success Icon      </Button>      <Button         onClick={() =>           toast("You have mail!", {            icon: <Mail className="h-4 w-4" />,          })        }      >        Custom Icon      </Button>    </div>  );}

Toast Positioning

Control where toasts appear on the screen.

components/data-display-examples/toast-examples.tsx→ToastPositionExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function ToastPositionExample() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button 
        onClick={() => 
          toast("Toast on top-left", {
            position: "top-left",
          })
        }
      >
        Top Left
      </Button>
      <Button 
        onClick={() => 
          toast("Toast on top-right", {
            position: "top-right",
          })
        }
      >
        Top Right
      </Button>
      <Button 
        onClick={() => 
          toast("Toast on bottom-left", {
            position: "bottom-left",
          })
        }
      >
        Bottom Left
      </Button>
      <Button 
        onClick={() => 
          toast("Toast on bottom-right", {
            position: "bottom-right",
          })
        }
      >
        Bottom Right
      </Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function ToastPositionExample() {  return (    <div className="grid grid-cols-2 gap-2">      <Button         onClick={() =>           toast("Toast on top-left", {            position: "top-left",          })        }      >        Top Left      </Button>      <Button         onClick={() =>           toast("Toast on top-right", {            position: "top-right",          })        }      >        Top Right      </Button>      <Button         onClick={() =>           toast("Toast on bottom-left", {            position: "bottom-left",          })        }      >        Bottom Left      </Button>      <Button         onClick={() =>           toast("Toast on bottom-right", {            position: "bottom-right",          })        }      >        Bottom Right      </Button>    </div>  );}

Toast Duration

Control how long toasts remain visible.

components/data-display-examples/toast-examples.tsx→ToastDurationExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function ToastDurationExample() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <Button 
        onClick={() => 
          toast("Short duration (1s)", {
            duration: 1000,
          })
        }
      >
        1 Second
      </Button>
      <Button 
        onClick={() => 
          toast("Long duration (10s)", {
            duration: 10000,
          })
        }
      >
        10 Seconds
      </Button>
      <Button 
        onClick={() => 
          toast("Persistent toast", {
            duration: Infinity,
            action: {
              label: "Dismiss",
              onClick: () => {},
            },
          })
        }
      >
        Persistent
      </Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function ToastDurationExample() {  return (    <div className="grid grid-cols-2 gap-2">      <Button         onClick={() =>           toast("Short duration (1s)", {            duration: 1000,          })        }      >        1 Second      </Button>      <Button         onClick={() =>           toast("Long duration (10s)", {            duration: 10000,          })        }      >        10 Seconds      </Button>      <Button         onClick={() =>           toast("Persistent toast", {            duration: Infinity,            action: {              label: "Dismiss",              onClick: () => {},            },          })        }      >        Persistent      </Button>    </div>  );}

Promise Toasts

Show loading states and handle async operations.

components/data-display-examples/toast-examples.tsx→ToastPromiseExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function ToastPromiseExample() {
  const simulateAsyncOperation = () => {
    return new Promise<string>((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve("Success!");
        } else {
          reject("Failed!");
        }
      }, 2000);
    });
  };

  return (
    <div className="space-y-2">
      <Button 
        onClick={() => 
          toast.promise(simulateAsyncOperation(), {
            loading: "Loading...",
            success: (data: string) => `Operation completed: ${data}`,
            error: (error: string) => `Error: ${error}`,
          })
        }
      >
        Promise Toast
      </Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function ToastPromiseExample() {  const simulateAsyncOperation = () => {    return new Promise<string>((resolve, reject) => {      setTimeout(() => {        if (Math.random() > 0.5) {          resolve("Success!");        } else {          reject("Failed!");        }      }, 2000);    });  };  return (    <div className="space-y-2">      <Button         onClick={() =>           toast.promise(simulateAsyncOperation(), {            loading: "Loading...",            success: (data: string) => `Operation completed: ${data}`,            error: (error: string) => `Error: ${error}`,          })        }      >        Promise Toast      </Button>    </div>  );}

Custom Toast

Create completely custom toast content.

components/data-display-examples/toast-examples.tsx→ToastCustomExample()✓ Auto-extracted

import { toast } from "@helgadigitals/vera-ui";
import { Button } from "@helgadigitals/vera-ui";
import { Star, Heart, Mail } from "lucide-react";
function ToastCustomExample() {
  return (
    <div className="space-y-2">
      <Button 
        onClick={() => 
          toast.custom((t: string | number) => (
            <div className="flex items-center space-x-3 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border">
              <Heart className="h-5 w-5 text-red-500" />
              <div>
                <p className="font-semibold">Custom Toast</p>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  This is a completely custom toast
                </p>
              </div>
              <Button 
                size="sm" 
                variant="ghost"
                onClick={() => toast.dismiss(t)}
              >
                ×
              </Button>
            </div>
          ))
        }
      >
        Custom Toast
      </Button>
    </div>
  );
}

import { toast } from "@helgadigitals/vera-ui";import { Button } from "@helgadigitals/vera-ui";import { Star, Heart, Mail } from "lucide-react";function ToastCustomExample() {  return (    <div className="space-y-2">      <Button         onClick={() =>           toast.custom((t: string | number) => (            <div className="flex items-center space-x-3 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border">              <Heart className="h-5 w-5 text-red-500" />              <div>                <p className="font-semibold">Custom Toast</p>                <p className="text-sm text-gray-600 dark:text-gray-400">                  This is a completely custom toast                </p>              </div>              <Button                 size="sm"                 variant="ghost"                onClick={() => toast.dismiss(t)}              >                ×              </Button>            </div>          ))        }      >        Custom Toast      </Button>    </div>  );}

API Reference

toast(message, options?)

Display a basic toast.

message (string): The main toast message
options (ToastOptions): Configuration options

toast.success(message, options?)

Display a success toast with checkmark icon.

toast.error(message, options?)

Display an error toast with X icon.

toast.warning(message, options?)

Display a warning toast with warning icon.

toast.info(message, options?)

Display an info toast with info icon.

toast.promise(promise, options)

Handle promise states with loading, success, and error toasts.

toast.custom(content)

Display a completely custom toast.

toast.dismiss(id?)

Dismiss a specific toast by ID, or all toasts if no ID provided.

ToastOptions

Prop

Type

Toaster Props

Prop

Type

Accessibility

Toasts are announced to screen readers using ARIA live regions
Keyboard navigation support for interactive elements
Automatic dismissal respects user preferences for reduced motion
High contrast mode compatibility

Best Practices

When to Use

User feedback - Confirm successful actions
Error notifications - Alert users to problems
System status - Inform about background processes
Temporary information - Show brief, contextual messages

When Not to Use

Critical errors - Use modals or alerts instead
Long content - Keep messages concise
Primary navigation - Don't rely on toasts for essential flow
Persistent information - Use permanent UI elements

Content Guidelines

Be concise - Keep messages short and scannable
Be specific - Clearly state what happened
Be actionable - Include relevant actions when appropriate
Use appropriate tone - Match the message type (success, error, etc.)

Theming

The toast component automatically adapts to your app's theme using CSS variables:

:root {
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
}

.dark {
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
}

Alert - For more prominent messaging
Badge - For status indicators
Progress - For operation progress

Toast

On this page