1. Components
  2. Toast

Components

Toast

Shows a temporary notification message at the top center of the screen. The toast can be customized with different alert types and display durations.

Toast

Basic Usage

The Toast component provides a callToast function that can be imported and used to display messages. The toast supports different alert types and customizable display durations.

To use the component, first import the callToast function:

        import Toast from "$lib/components/Toast.svelte"

      

Then call the function with your message:

        let toast: Toast;
toast.callToast("Your message here")

      

Parameters

The callToast function accepts the following parameters:

  • msg (string, required): The message to display
  • type (string, optional): The alert type (e.g., "success", "error", "warning", "info")
  • ms (number, optional): Duration in milliseconds (defaults to 8000ms)

Examples

Basic usage:

        callToast("Operation completed successfully")

      

With alert type:

        callToast("Error occurred", "error")

      

With custom duration:

        callToast("Quick notification", "info", 3000)

      

Alert Types

The component supports the following alert types:

  • success
  • error
  • warning
  • info

When an alert type is specified, the toast will be styled according to DaisyUI's alert classes.