Toaster Component | Style Guide

Usage

// Basic usage
this.$toast.success('Operation completed successfully!')

// With title and custom duration
this.$toast.error('Upload failed', {
  title: 'Error',
  duration: 8000
})

Methods

Method	Parameters	Description
success	message, options	Shows a success toast notification
error	message, options	Shows an error toast notification
warning	message, options	Shows a warning toast notification
info	message, options	Shows an info toast notification
remove	id	Removes a specific toast by ID
clear	-	Removes all active toasts

Options

Option	Type	Default	Description
title	String	-	Optional title for the toast
duration	Number	5000	Duration in milliseconds (0 = no auto-remove)

Toast Types

The Toaster component supports 4 different types of notifications:

Success

Used for successful operations and confirmations.

Error

Used for errors, failures, and critical issues.

Warning

Used for warnings and important notices.

Info

Used for general information and updates.

Examples

Common use cases and advanced examples:

Basic Examples

Advanced Examples

Multiple Toasts

Show multiple toasts at once to see the stacking behavior.

Code Examples

Basic Usage

// In a Vue component
export default {
  methods: {
    handleSuccess() {
      this.$toast.success('Operation completed successfully!')
    },
    
    handleError() {
      this.$toast.error('Something went wrong!')
    }
  }
}

With Options

// Toast with title and custom duration
this.$toast.error('Upload failed', {
  title: 'Upload Error',
  duration: 8000
})

// Persistent toast (no auto-remove)
this.$toast.warning('Please save your work', {
  title: 'Important',
  duration: 0
})

Programmatic Control

// Store toast ID for later removal
const toastId = this.$toast.info('Processing...', { duration: 0 })

// Remove specific toast
this.$toast.remove(toastId)

// Clear all toasts
this.$toast.clear()