Delphi Design

Non-blocking notifications for user feedback and status updates. Uses a frosted glass style with backdrop blur.

Interactive Demo

Click the buttons below to trigger each toast variant.

All Variants

Stacking

Triggers three toasts in quick succession to test stacking behavior.

Setup

Add the Toaster component to your app layout:

import { Toaster } from "@delphi/ui";

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

Usage

import { toast } from "@delphi/ui";

// Simple toast
toast("Hello world!");

// With description
toast("Title", {
  description: "This is a description",
});

// Success variant
toast.success("Operation completed");

// Error variant
toast.error("Something went wrong");

// Warning variant
toast.warning("Heads up", {
  description: "This action cannot be undone.",
});

// With action
toast("File deleted", {
  action: {
    label: "Undo",
    onClick: () => restoreFile(),
  },
});

// Promise toast
toast.promise(saveData(), {
  loading: "Saving...",
  success: "Saved!",
  error: "Failed to save",
});

API Reference

Function	Description
`toast(message, options?)`	Show a default toast
`toast.success(message, options?)`	Show a success toast
`toast.error(message, options?)`	Show an error toast
`toast.warning(message, options?)`	Show a warning toast
`toast.promise(promise, options)`	Show loading/success/error states
`toast.dismiss(id?)`	Dismiss a toast or all toasts

Options

Prop	Type	Default	Description
`description`	`string`	-	Additional description text
`duration`	`number`	`3000`	Auto-dismiss duration in ms
`action`	`{ label: string, onClick: () => void }`	-	Action button
`id`	`string`	-	Custom toast ID for updates

Use toasts for non-critical, transient feedback

Keep messages concise — ideally under 50 characters

Provide undo actions for destructive operations

Use toast.promise for async operations to show progress

Use toasts for errors that require user action — use inline errors instead

Use toasts for critical information that must not be missed

Set duration to 0 (persistent) without a close button