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.

import { XIcon } from 'lucide-react'
import { Toast, Toaster, createToaster } from '@ark-ui/react'

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

export const Basic = () => {
  return (
    <div>
      <button
        type="button"
        onClick={() =>
          toaster.create({
            title: 'Toast Title',
            description: 'Toast Description',
            type: 'info',
          })
        }
      >
        Add Toast
      </button>
      <Toaster toaster={toaster}>
        {(toast) => (
          <Toast.Root key={toast.id}>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.ActionTrigger>Do Action</Toast.ActionTrigger>
            <Toast.CloseTrigger>
              <XIcon />
            </Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

import { XIcon } from 'lucide-solid'
import { Toast, Toaster, createToaster } from '@ark-ui/solid'

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

  return (
    <div>
      <button
        type="button"
        onClick={() =>
          toaster.create({
            title: 'Loading!',
            description: 'We are loading something for you. Please wait.',
            type: 'info',
          })
        }
      >
        Add Toast
      </button>
      <Toaster toaster={toaster}>
        {(toast) => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.CloseTrigger>
              <XIcon />
            </Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

<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

import { XIcon } from 'lucide-react'
import { useRef } from 'react'
import { Toast, Toaster, createToaster } from '@ark-ui/react'

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

export const Update = () => {
  const id = useRef<string>()

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

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

  return (
    <div>
      <button type="button" onClick={createToast}>
        Create Toast
      </button>
      <button type="button" onClick={updateToast}>
        Update Toast
      </button>
      <Toaster toaster={toaster}>
        {(toast) => (
          <Toast.Root key={toast.id}>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.ActionTrigger>Do Action</Toast.ActionTrigger>
            <Toast.CloseTrigger>
              <XIcon />
            </Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

Example not found

Example not found

API Reference

Root

Prop	Default	Type
`asChild`		`(props: ParentProps<'div'>) => Element` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[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

Prop	Default	Type
`asChild`		`(props: ParentProps<'button'>) => Element` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

CloseTrigger

Prop	Default	Type
`asChild`		`(props: ParentProps<'button'>) => Element` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Description

Prop	Default	Type
`asChild`		`(props: ParentProps<'div'>) => Element` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Title

Prop	Default	Type
`asChild`		`(props: ParentProps<'div'>) => Element` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Toaster

Prop	Default	Type
`toaster`		`CreateToasterReturn`
`asChild`		`(props: ParentProps<'div'>) => Element` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.