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-partattribute 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:
Story not foundStory not foundStory not foundCustom 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:
Story not foundStory not foundStory not foundAPI Reference
Root
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Createer
| Prop | Type | Default |
|---|---|---|
placementThe placement of the toast | Placement | |
count | number | |
descriptionThe description of the toast. | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal | |
dirThe document's text/writing direction. | 'rtl' | 'ltr' | "ltr" |
durationThe duration the toast will be visible | number | |
gapThe gap or spacing between toasts | number | |
getRootNodeA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | () => Node | ShadowRoot | Document | |
hotkeyThe hotkey that will move focus to the toast group | string[] | |
idThe unique identifier of the machine. | string | |
maxThe maximum number of toasts that can be shown at once | number | |
offsetsThe offset from the safe environment edge of the viewport | string | Record<'left' | 'right' | 'top' | 'bottom', string> | |
overlapWhether the toasts should overlap each other | boolean | |
pauseOnPageIdleWhether to pause toast when the user leaves the browser tab | boolean | |
removeDelayThe duration for the toast to kept alive before it is removed.
Useful for exit transitions. | number | |
titleThe title of the toast. | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal |
ActionTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
CloseTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Description
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Title
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
er
| Prop | Type | Default |
|---|---|---|
toaster | CreateToasterReturn | |
asChildRender as a different element type. | boolean |
Previous
Tags InputNext
Toggle Group