Toast

A succinct alert message that is displayed temporarily.

Usage

Add ToastContainer to the top level of your app

vue

<script setup lang="ts">
import { ToastContainer } from '@youcan/ui-vue3';
</script>

<template>
  <ToastContainer :limit="3" />
</template>

Use toast.show to show a toast

vue

<script setup lang="ts">
import { toast } from '@youcan/ui-vue3/helpers';
import type { ToastOptions } from '@youcan/ui-vue3/types';

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

API Reference

ToastContainer

toast.show