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.

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>
  )
}

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

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

API Reference

Root

PropDefaultType
asChild
boolean

Render as a different element type.

Createer

PropDefaultType
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
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
string[]

The hotkey that will move focus to the toast group

id
string

The unique identifier of the machine.

max
number

The maximum number of toasts that can be shown at once

offsets
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
boolean

Whether to pause toast when the user leaves the browser tab

removeDelay
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

PropDefaultType
asChild
boolean

Render as a different element type.

CloseTrigger

PropDefaultType
asChild
boolean

Render as a different element type.

Description

PropDefaultType
asChild
boolean

Render as a different element type.

Title

PropDefaultType
asChild
boolean

Render as a different element type.

er

PropDefaultType
toaster
CreateToasterReturn

asChild
boolean

Render as a different element type.