Delphi Design

Non-blocking notifications for user feedback and status updates.

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, Button } 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");

// 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.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`	`4000`	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

Position toasts consistently across your app

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

Show multiple toasts simultaneously — they stack and overwhelm users

Use toasts for critical information that must not be missed

Set duration to 0 (persistent) without a close button