Toast

<script setup>
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your changes have been saved.',
    color: 'primary'
  })
}
</script>

<template>
  <button @click="showToast">Show Toast</button>
</template>

<script setup>
const toast = useToast()

const notifyUser = () => {
  toast.add({
    title: 'Hello!',
    description: 'This is a toast notification.',
    duration: 5000
  })
}
</script>

<script setup>
const toast = useToast()

const showProgress = () => {
  const id = toast.add({
    title: 'Processing...',
    description: 'Please wait'
  }).id

  setTimeout(() => {
    toast.update(id, {
      title: 'Complete!',
      description: 'Processing finished',
      color: 'green'
    })
  }, 3000)
}
</script>

<script setup>
const toast = useToast()

const id = toast.add({ title: 'Temporary' }).id

setTimeout(() => {
  toast.remove(id)
}, 2000)
</script>

<script setup>
const toast = useToast()

const clearAll = () => {
  toast.clear()
}
</script>

<script setup>
const toast = useToast()

const activeToasts = computed(() => toast.toasts.value.length)
</script>

toast.add({
  title: 'Simple Title'
})

// With function
toast.add({
  title: () => h('span', { class: 'font-bold' }, 'Custom Title')
})

toast.add({
  icon: 'i-heroicons-check-circle',
  title: 'Success',
  description: 'Operation completed'
})

toast.add({
  avatar: { src: '/user.jpg', alt: 'User' },
  title: 'New Message',
  description: 'You have a new message'
})

toast.add({
  title: 'No Close Button',
  close: false
})

toast.add({
  title: 'Action Required',
  description: 'Please confirm your choice',
  actions: [
    { label: 'Confirm', color: 'primary', onClick: () => console.log('Confirmed') },
    { label: 'Cancel', variant: 'ghost' }
  ]
})

toast.add({
  title: 'Auto-closing',
  duration: 5000,
  progress: true
})

// Custom progress color
toast.add({
  title: 'Custom Progress',
  progress: { color: 'green' }
})

toast.add({
  title: 'Quick Message',
  duration: 2000 // 2 seconds
})

<script setup>
const toast = useToast()

const notify = () => {
  toast.add({
    title: 'Notification',
    description: 'This is a basic toast message'
  })
}
</script>

toast.add({
  icon: 'i-heroicons-check-circle',
  title: 'Success!',
  description: 'Your changes have been saved',
  color: 'green'
})

toast.add({
  icon: 'i-heroicons-x-circle',
  title: 'Error',
  description: 'Something went wrong',
  color: 'red',
  duration: 5000
})

toast.add({
  title: 'Confirm Action',
  description: 'Are you sure you want to delete this item?',
  actions: [
    {
      label: 'Delete',
      color: 'red',
      onClick: () => {
        console.log('Deleting...')
      }
    },
    {
      label: 'Cancel',
      variant: 'ghost'
    }
  ]
})

const persistentToast = toast.add({
  title: 'Important',
  description: 'This toast will not auto-close',
  duration: Infinity,
  progress: false
})

// Later, manually remove it
toast.remove(persistentToast.id)

const loadingToast = toast.add({
  title: 'Loading...',
  description: 'Processing your request',
  icon: 'i-heroicons-arrow-path',
  duration: Infinity
})

try {
  await someAsyncOperation()
  
  toast.update(loadingToast.id, {
    icon: 'i-heroicons-check-circle',
    title: 'Success!',
    description: 'Operation completed',
    color: 'green',
    duration: 3000
  })
} catch (error) {
  toast.update(loadingToast.id, {
    icon: 'i-heroicons-x-circle',
    title: 'Error',
    description: error.message,
    color: 'red',
    duration: 5000
  })
}