Toast | Ark UI

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 { Toast, createToaster } from '@ark-ui/react'

const Basic = () => {
  const [Toaster, toast] = createToaster({
    placement: 'top-end',
    render(toast) {
      return (
        <Toast.Root>
          <Toast.Title>{toast.title}</Toast.Title>
          <Toast.Description>{toast.description}</Toast.Description>
          <Toast.CloseTrigger>Close</Toast.CloseTrigger>
        </Toast.Root>
      )
    },
  })

  return (
    <>
      <button onClick={() => toast.create({ title: 'Title', description: 'Description' })}>
        Toast
      </button>
      <Toaster />
    </>
  )
}

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

const Basic = () => {
  const [Toaster, toast] = createToaster({
    placement: 'top-end',
    render(toast) {
      return (
        <Toast.Root>
          <Toast.Title>{toast().title}</Toast.Title>
          <Toast.Description>{toast().description}</Toast.Description>
          <Toast.CloseTrigger>Close</Toast.CloseTrigger>
        </Toast.Root>
      )
    },
  })

  return (
    <>
      <button onClick={() => toast().create({ title: 'Title', description: 'Description' })}>
        Toast
      </button>
      <Toaster />
    </>
  )
}

<script setup lang="ts">
null
</script>

<template><button @click="createBasicToast">Toast</button> <BasicToaster /></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:

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

const Customized = () => {
  const [Toaster, toast] = createToaster({
    placement: 'bottom-start',
    render(toast) {
      return (
        <Toast.Root>
          <Toast.Title>{toast.title}</Toast.Title>
          <Toast.Description>{toast.description}</Toast.Description>
          <Toast.CloseTrigger>Close</Toast.CloseTrigger>
        </Toast.Root>
      )
    },
  })

  return (
    <>
      <button
        onClick={() =>
          toast.create({
            title: 'Success',
            description: 'This is a success toast',
            type: 'success',
            duration: 20000,
            removeDelay: 250,
          })
        }
      >
        Toast
      </button>
      <Toaster />
    </>
  )
}

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

const Customized = () => {
  const [Toaster, toast] = createToaster({
    placement: 'bottom-start',
    render(toast) {
      return (
        <Toast.Root>
          <Toast.Title>{toast().title}</Toast.Title>
          <Toast.Description>{toast().description}</Toast.Description>
          <Toast.CloseTrigger>Close</Toast.CloseTrigger>
        </Toast.Root>
      )
    },
  })

  return (
    <>
      <button
        onClick={() =>
          toast().create({
            title: 'Success',
            description: 'This is a success toast',
            type: 'success',
            duration: 20000,
            removeDelay: 250,
          })
        }
      >
        Toast
      </button>
      <Toaster />
    </>
  )
}

<script setup lang="ts">
null
</script>

<template><button @click="createCustomizedToast">Toast</button> <CustomizedToaster /></template>

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:

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

const CustomRender = () => {
  const [Toaster, toast] = createToaster({
    placement: 'top-end',
    // custom render may go directly into the function below
    render(toast) {
      return (
        <Toast.Root>
          <Toast.Title>{toast.title}</Toast.Title>
          <Toast.Description>{toast.description}</Toast.Description>
          <Toast.CloseTrigger>Close</Toast.CloseTrigger>
        </Toast.Root>
      )
    },
  })

  return (
    <>
      <button
        onClick={() =>
          toast.create({
            title: 'Please checkout',
            render: (toast) => (
              <div>
                {toast.title} <a href="https://ark-ui.com">Ark UI</a>
              </div>
            ),
          })
        }
      >
        Toast
      </button>
      <Toaster />
    </>
  )
}

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

const CustomRender = () => {
  const [Toaster, toast] = createToaster({
    placement: 'top-end',
    // custom render may go directly into the function below
    render(toast) {
      return (
        <Toast.Root>
          <Toast.Title>{toast().title}</Toast.Title>
          <Toast.Description>{toast().description}</Toast.Description>
          <Toast.CloseTrigger>Close</Toast.CloseTrigger>
        </Toast.Root>
      )
    },
  })

  return (
    <>
      <button
        onClick={() =>
          toast().create({
            title: 'Please checkout',
            render: (toast) => (
              <div>
                {toast().title} <a href="https://ark-ui.com">Ark UI</a>
              </div>
            ),
          })
        }
      >
        Toast
      </button>
      <Toaster />
    </>
  )
}

<script setup lang="ts">
null
</script>

<template><button @click="createCustomRenderToast">Toast</button> <CustomRenderToaster /></template>

API Reference

Root

PropTypeDefault


`asChild`	`boolean`

Group

PropTypeDefault


`asChild`	`boolean`

Title

PropTypeDefault


`asChild`	`boolean`

Createer

PropTypeDefault


`placement`	`Placement`
`render`	`(api: MachineApi<PropTypes>) => Element`
`count`	`number`
`dir`	`'ltr' \| 'rtl'`	`"ltr"`
`doc`	`Document`
`duration`	`number`
`getRootNode`	`() => Node \| ShadowRoot \| Document`
`gutter`	`string`
`id`	`string`
`max`	`number`
`offsets`	`string \| Record<'left' \| 'right' \| 'top' \| 'bottom', string>`
`pauseOnInteraction`	`boolean`
`pauseOnPageIdle`	`boolean`
`pointerdownNode`	`HTMLElement`
`removeDelay`	`number`
`rootNode`	`ShadowRoot`
`zIndex`	`number`

Description

PropTypeDefault


`asChild`	`boolean`

CloseTrigger

PropTypeDefault


`asChild`	`boolean`