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.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>

Configuring Toast

To configure the Toast component, you can pass various options to the toast.create method. These options include title, description, type, duration, and removeDelay:

Example not found

Example not found

Example not found

Custom Rendered Toast

For cases where you need more flexibility in rendering, the Toast component offers the ability to use a custom render function. This allows you to customize the content of the toast:

Example not found

Example not found

Example not found

API Reference

Root

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

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

Createer

Prop	Default	Type
`placement`		`Placement` The placement of the toast
`count`		`number`
`description`		`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` The description of the toast.
`dir`	`'ltr'`	`'rtl' \| 'ltr'` The document's text/writing direction.
`duration`		`number` The duration the toast will be visible
`gap`	`16`	`number` The gap or spacing between toasts
`getRootNode`		`() => Node \| ShadowRoot \| Document` A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`hotkey`	`'['altKey', 'KeyT']'`	`string[]` The hotkey that will move focus to the toast group
`id`		`string` The unique identifier of the machine.
`max`	`Number.MAX_SAFE_INTEGER`	`number` The maximum number of toasts that can be shown at once
`offsets`	`'1rem'`	`string \| Record<'left' \| 'right' \| 'top' \| 'bottom', string>` The offset from the safe environment edge of the viewport
`overlap`		`boolean` Whether the toasts should overlap each other
`pauseOnPageIdle`	`false`	`boolean` Whether to pause toast when the user leaves the browser tab
`removeDelay`	`200`	`number` The duration for the toast to kept alive before it is removed. Useful for exit transitions.
`title`		`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` The title of the toast.

ActionTrigger

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

CloseTrigger

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Description

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

Title

Prop	Default	Type
`asChild`		`boolean` Render as a different element type.

er

Prop	Default	Type
`toaster`		`CreateToasterReturn`
`asChild`		`boolean` Render as a different element type.