Toast Plugin

A Service for displaying toast notifications with multiple severity levels and customizable timing. Perfect for user feedback, status updates, and non-intrusive messaging in web applications.

Features

• Multiple Notification Types: Error, Warning, Success, and Info toasts
• Customizable Duration: Set custom display time for each toast
• Interactive Controls: Pause on hover, resume on leave, click to dismiss
• Auto-dismiss: Automatic closure with visual progress bar
• Consistent Positioning: Top-end positioning for non-intrusive display

Service Reference

Toast Methods

The utility provides four main methods for different notification types:

toast.error(msg: string, delay?: number): void
toast.warn(msg: string, delay?: number): void
toast.success(msg: string, delay?: number): void
toast.info(msg: string, delay?: number): void

Parameters

Parameter	Type	Default	Description
msg	string	-	The message to display in the toast
delay	number	3000	Duration in milliseconds before auto-dismiss

Usage Examples

Using the Plugin in Vue Components

The toast service is available as a global plugin in Vue components via $toast:

<template>
  <button @click="$toast.success('Data saved successfully!')">
    Fire Toast!
  </button>
</template>

<script setup lang="ts"></script>

Using the Function Export

You can also import and use the toast service directly:

import { toast } from "dolphin-components";

// Success notification
toast.success("Data saved successfully!");

// Error notification
toast.error("Failed to save data. Please try again.");

// Warning notification
toast.warn("Your session will expire in 5 minutes.");

// Info notification
toast.info("New update available. Click here to refresh.");

Custom Duration

// Quick notification (1 second)
toast.success("Copied to clipboard!", 1000);

// Long notification (10 seconds)
toast.error("Critical error occurred. Please contact support.", 10000);

// Permanent notification (very long duration)
toast.info("Please complete your profile setup.", 30000);

Common Use Cases

• Form Validation: Show validation errors and success messages
• API Responses: Display server response feedback
• File Operations: Upload/download progress and results
• User Authentication: Login/logout status messages
• Real-time Updates: WebSocket notifications and alerts
• Background Operations: Long-running task completion
• System Status: Connection status and system alerts