​
Toast Component

A modern, accessible toast notification system using the native Popover API. Supports multiple types, positions, and programmatic usage.

​
Features

  • ✅ Native Popover API: Uses browser-native popover for better performance
  • ✅ Multiple Types: Success, Danger, Warning, Info
  • ✅ Flexible Positioning: Top/Bottom × Center/Right
  • ✅ Auto-dismiss: Configurable duration or manual dismiss
  • ✅ Programmatic API: Easy-to-use toast manager
  • ✅ Beautiful Design: Glassmorphism with smooth animations
  • ✅ Dark Mode: Full dark mode support
  • ✅ Type-Safe: Full TypeScript support

​
Installation

The component is available in @monorepo/solid-pkg-ui: 
import { ToastContainer, toast } from "@monorepo/solid-pkg-ui";

​
Setup

Add the ToastContainer to your app root or layout: 
import { ToastContainer } from "@monorepo/solid-pkg-ui";

function App() {
  return (
    <>
      <ToastContainer />
      {/* Your app content */}
    </>
  );
}

​
Usage

The easiest way to show toasts is using the toast manager: 
import { toast } from "@monorepo/solid-pkg-ui";

// Success toast
toast.success("Your changes have been saved!", {
  title: "Success",
  position: "top-right",
  duration: 3000,
});

// Error toast
toast.danger("Failed to save changes", {
  title: "Error",
  position: "top-right",
});

// Warning toast
toast.warning("This action cannot be undone", {
  title: "Warning",
  position: "top-center",
  duration: 0, // Won't auto-dismiss
});

// Info toast
toast.info("New features are available", {
  title: "Info",
  position: "bottom-right",
});

​
Component Usage

You can also use the Toast component directly: 
import { Toast } from "@monorepo/solid-pkg-ui";

<Toast
  id="my-toast"
  type="success"
  title="Success!"
  message="Your request has been submitted."
  duration={3000}
  position="top-right"
  onClose={() => console.log("Toast closed")}
/>;

​
API Reference

​
toast Manager

​
Methods

MethodSignatureDescription
success(message: string, options?) => stringShow success toast
danger(message: string, options?) => stringShow error toast
warning(message: string, options?) => stringShow warning toast
info(message: string, options?) => stringShow info toast
show(toast: ToastProps) => stringShow custom toast
remove(id: string) => voidRemove toast by ID

​
Options

interface ToastOptions {
  id?: string; // Custom ID (auto-generated if not provided)
  title?: string; // Toast title
  duration?: number; // Auto-dismiss duration in ms (0 = no auto-dismiss)
  position?: ToastPosition; // Toast position
  onClose?: () => void; // Callback when toast closes
}

​
Toast Component Props

interface ToastProps {
  id: string; // Required: Unique ID
  type?: ToastType; // 'success' | 'danger' | 'warning' | 'info'
  title?: string; // Optional title
  message: string; // Required: Toast message
  duration?: number; // Auto-dismiss duration (default: 5000ms)
  position?: ToastPosition; // Toast position (default: 'top-right')
  onClose?: () => void; // Callback when closed
}

​
Types

type ToastType = "success" | "danger" | "warning" | "info";

type ToastPosition =
  | "top-center"
  | "top-right"
  | "bottom-center"
  | "bottom-right";

​
Best Practices

  1. Use Appropriate Types:
    • success: Confirmations, successful operations
    • danger: Errors, failures, critical issues
    • warning: Warnings, confirmations needed
    • info: General information, tips
  2. Set Reasonable Durations:
    • Success: 3000ms (3 seconds)
    • Error: 5000ms (5 seconds)
    • Warning: 0 (manual dismiss) or 7000ms
    • Info: 4000ms
  3. Keep Messages Concise:
    • Title: 1-3 words
    • Message: 1-2 sentences max
  4. Choose the Right Position:
    • top-right: Default, non-intrusive
    • top-center: Important notifications
    • bottom-right: Background processes
    • bottom-center: Form validations

​
Accessibility

  • ✅ Keyboard accessible (close with Escape)
  • ✅ Screen reader friendly
  • ✅ High contrast colors
  • ✅ Clear visual indicators
  • ✅ Proper ARIA labels