useToast

Usage

Use the auto-imported useToast composable to display Toast notifications.

<script setup lang="ts">
import ReplyIcon from '@bitrix24/b24icons-vue/actions/ReplyIcon'

const toast = useToast()

function showToast() {
  toast.add({
    title: 'New message',
    description: 'You have a new message from Benjamin.',
    actions: [{
      icon: ReplyIcon,
      label: 'Reply',
      color: 'air-secondary-accent-2',
      onClick: () => {
        toast.add({ title: 'Reply sent', color: 'air-primary-success' })
      }
    }]
  })
}
</script>

<template>
  <B24Button label="Show toast" @click="showToast" />
</template>

• The useToast composable uses Nuxt's useState to manage the toast state, ensuring reactivity across your application.
• A maximum of 5 toasts are displayed at a time by default. When adding a new toast that would exceed this limit, the oldest toast is automatically removed. Change it with the toaster.max prop on the App component.
• When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.

API

useToast()

The useToast composable provides methods to manage toast notifications globally.

add()

add(toast: Partial<Toast>): Toast

Adds a new toast notification.

Parameters

Returns: The complete Toast object that was added.

<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Success',
    description: 'Your action was completed successfully.',
    color: 'air-primary-success'
  })
}
</script>

update()

update(id: string | number, toast: Omit<Partial<Toast>, 'id'>): void

Updates an existing toast notification.

Parameters

<script setup lang="ts">
const toast = useToast()

function updateToast(id: string | number) {
  toast.update(id, {
    title: 'Updated Toast',
    description: 'This toast has been updated.'
  })
}
</script>

remove()

remove(id: string | number): void

Removes a toast notification.

Parameters

<script setup lang="ts">
const toast = useToast()

function removeToast(id: string | number) {
  toast.remove(id)
}
</script>

clear()

clear(): void

Removes all toast notifications.

<script setup lang="ts">
const toast = useToast()

function clearAllToasts() {
  toast.clear()
}
</script>

toasts

toasts: Ref<Toast[]>

A reactive array containing all current toast notifications.

<script setup lang="ts">
const { toasts } = useToast()
</script>

<template>
  <div>
    <pre>{{ toasts }}</pre>
  </div>
</template>