Ark Logo

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.

Examples

To use the Toast component in your application, you need to set it up using the createToaster hook. This hook manages the placement and grouping of toasts, and provides a toast object needed to create toast notification.

To create a basic Toast, use the toast.create method to display a notification.

<script setup lang="tsx">
import {
  ToastActionTrigger,
  ToastCloseTrigger,
  ToastDescription,
  ToastRoot,
  ToastTitle,
  Toaster,
  createToaster,
} from '@ark-ui/vue'

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">
    <ToastRoot>
      <ToastTitle>{{ toast.title }}</ToastTitle>
      <ToastDescription>{{ toast.description }}</ToastDescription>
      <ToastActionTrigger>Action</ToastActionTrigger>
      <ToastCloseTrigger>Close</ToastCloseTrigger>
    </ToastRoot>
  </Toaster>
</template>

Update Toast

Example not found

API Reference

Root

PropDefaultType
asChildfalse
boolean

Data AttributeValue
[data-scope]toast
[data-part]root
[data-state]"open" | "closed"
[data-type]
[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
asChildfalse
boolean

CloseTrigger

PropDefaultType
asChildfalse
boolean

Description

PropDefaultType
asChildfalse
boolean

Title

PropDefaultType
asChildfalse
boolean

Toaster

PropDefaultType
toaster
CreateToasterReturn

asChild
boolean