Toast

1<script setup lang="ts">2import { Button, Toast, useToast } from '@vitral/vue';3 4const toast = useToast();5const severities = [6    { severity: 'success', summary: 'Saved', detail: 'Your changes are live.' },7    { severity: 'info', summary: 'Update available', detail: 'Restart to install version 2.4.' },8    { severity: 'warn', summary: 'Storage almost full', detail: '92% of 15 GB used.' },9    { severity: 'danger', summary: 'Upload failed', detail: 'The connection was reset.' },10    { severity: 'secondary', summary: 'Synced', detail: 'Everything is up to date.' },11    { severity: 'contrast', summary: 'Copied', detail: 'The link is on your clipboard.' }12] as const;13 14// A group of its own, so only this example's <Toast> shows these messages15// when another <Toast> is on the page.16function show(index: number) {17    toast.add({ ...severities[index]!, group: 'severities', life: 4000 });18}19</script>20 21<template>22    <Toast group="severities" />23    <Button v-for="(s, i) in severities" :key="s.severity" :label="s.severity" severity="secondary" @click="show(i)" />24</template>

1<script setup lang="ts">2import { Button, Toast, useToast } from '@vitral/vue';3 4const toast = useToast();5 6// Each <Toast> has a group, so it shows only the messages sent to it7// when another <Toast> is on the page.8function sticky() {9    toast.add({ group: 'sticky', severity: 'info', summary: 'Stays until closed', detail: 'No life, so it waits for you.' });10}11 12function bottom() {13    toast.add({ group: 'bc', severity: 'success', summary: 'Message sent', life: 3000 });14}15</script>16 17<template>18    <Toast group="sticky" />19    <Toast position="bottom-center" group="bc" />20    <Button label="Sticky" severity="secondary" @click="sticky" />21    <Button label="Bottom centre" severity="secondary" @click="bottom" />22    <Button label="Clear all" severity="secondary" variant="outlined" @click="toast.removeAll()" />23</template>