Components
Toast

Toast

A message that appears on the screen to provide feedback on an action.

Anatomy

To set up the toast correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Setup

To use the Toast component, create the toast engine using the createToaster function.

This function manages the placement and grouping of toasts, and provides a toast object needed to create toast notification.

const toaster = createToaster({
  placement: 'bottom-end',
  overlap: true,
  gap: 24,
})

Examples

Here's an example of creating a toast using the toast.create method.

<script setup lang="tsx">
import { Toast, Toaster, createToaster } from '@ark-ui/vue/toast'

const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24 })

const createToast = () => {
  toaster.create({
    title: 'Title',
    description: 'Description',
    type: 'info',
  })
}
</script>

<template>
  <button @click="createToast">Create Toast</button>
  <Toaster :toaster="toaster" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.ActionTrigger>Action</Toast.ActionTrigger>
      <Toast.CloseTrigger>Close</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

Update Toast

To update a toast, use the toast.update method.

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@ark-ui/vue/toast'
import { ref } from 'vue'

const toaster = createToaster({
  placement: 'bottom-end',
  overlap: true,
  gap: 24,
})

const id = ref<string | undefined>(undefined)

const createToast = () => {
  id.value = toaster.create({
    title: 'Loading',
    description: 'Loading ...',
    type: 'info',
  })
}

const updateToast = () => {
  if (!id.value) {
    return
  }
  toaster.update(id.value, {
    title: 'Success',
    description: 'Success!',
  })
}
</script>

<template>
  <div>
    <button type="button" @click="createToast">Create Toast</button>
    <button type="button" @click="updateToast">Update Toast</button>
    <Toaster :toaster="toaster" v-slot="toast">
      <Toast.Root>
        <Toast.Title>{{ toast.title }}</Toast.Title>
        <Toast.Description>{{ toast.description }}</Toast.Description>
      </Toast.Root>
    </Toaster>
  </div>
</template>

Action

To add an action to a toast, use the toast.action property.

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@ark-ui/vue/toast'

const toaster = createToaster({
  placement: 'bottom-end',
  gap: 24,
})

const addToast = () => {
  toaster.create({
    title: 'Toast Title',
    description: 'Toast Description',
    type: 'info',
    action: {
      label: 'Subscribe',
      onClick: () => {
        console.log('Subscribe')
      },
    },
  })
}
</script>

<template>
  <div>
    <button type="button" @click="addToast">Add Toast</button>
    <Toaster :toaster="toaster" v-slot="toast">
      <ToastRoot :key="toast.id">
        <Toast.Title>{{ toast.title }}</Toast.Title>
        <Toast.Description>{{ toast.description }}</Toast.Description>
        <Toast.ActionTrigger v-if="toast.action">{{ toast.action?.label }}</Toast.ActionTrigger>
      </ToastRoot>
    </Toaster>
  </div>
</template>

API Reference

Root

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]toast
[data-part]root
[data-state]"open" | "closed"
[data-type]The type of the item
[data-placement]The placement of the toast
[data-align]
[data-side]
[data-mounted]Present when mounted
[data-paused]Present when paused
[data-first]
[data-sibling]
[data-stack]
[data-overlap]Present when overlapping

ActionTrigger

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

CloseTrigger

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Description

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Title

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Toaster

PropDefaultType
toaster
CreateToasterReturn

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.