Toast

Shows a toast message in the corner.

Examples

Basic toast

Code

<template>
  <teleport to="body">
    <Toaster />
  </teleport>
  <Button
    @click="toast({ title: 'Success', description: 'Item successfully added!' } )"
  >
    Show toast
  </Button>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Toaster, useToast } from '@/components/ui/toast'

const { toast } = useToast()
</script>

Destructive toast

Code

<template>
  <teleport to="body">
    <Toaster />
  </teleport>
  <Button @click="toast({ title: 'Error', variant: 'destructive', description: 'Item not added added!'})">
    Show toast
  </Button>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Toaster, useToast } from '@/components/ui/toast'

const { toast } = useToast()
</script>

Toast with an action

Code

<template>
  <teleport to="body">
    <Toaster />
  </teleport>
  <Button
    @click="toast({
      title: 'In progress...',
      description: 'Your export is being processed.',
      action: h(ToastAction, {
        altText: 'Undo',
        onClick () {
          dismiss()
        }
      }, {
        default: () => 'Undo',
      })
    })"
  >
    Show toast
  </Button>
</template>
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Toaster, ToastAction, useToast } from '@/components/ui/toast'
import { h } from 'vue'

const { toast, dismiss } = useToast()
</script>