Toast

A succinct alert message that is displayed temporarily.

When to Use

To display feedback or alerts without interrupting the user's current activity.

Usage

ts

import { ToastContainer } from '@youcan/alto';
import { toast } from '@youcan/alto/helpers';
import type { ToastOptions } from '@youcan/alto/types';

const handleClick = () => {
  const toastOptions: ToastOptions = {
    title: 'Info',
    description: 'Click here to learn more',
    type: 'info',
  };
  toast.show(toastOptions);
};

vue

<ToastContainer :limit="3" position="top-right" />

API Reference