Toast

A brief on-screen notification that delivers feedback about a recent action.

Usage

The Toast component is used to display temporary notifications. It is built on top of Ark UI's Toast logic.

To use toasts, you first need to create a toaster using createToaster and then render the Toaster component at the root of your application (or near the root).

import { createToaster, Toaster, Button } from "@elemnts-ui/react";

const toaster = createToaster({
  placement: "top-end",
  overlap: true,
  gap: 16,
});

const Demo = () => {
  return (
    <>
      <Button
        onClick={() =>
          toaster.create({
            title: "Success",
            description: "Your changes have been saved.",
            type: "success",
          })
        }
      >
        Show Toast
      </Button>
      <Toaster toaster={toaster} />
    </>
  );
};

Examples

Types

Toast supports different semantic types: info, success, warning, error, and loading. Each type comes with a default icon and color palette.

Custom Icons

You can customize the icons for each toast type using the indicator prop on the Toaster component or by providing an icon in the toaster.create call.

Duration

The duration of the toast can be customized globally in createToaster or per toast in toaster.create.

With Action

Toasts can include action buttons using the action property in toaster.create.

API Reference

Toaster

Renders the toast group with Elemnts's default toast content.

Prop	Type	Default
toaster	`CreateToasterReturn<any>`	required
title	`ReactNode`	-
description	`ReactNode`	-
indicator	`ReactNode`	-
control	`ReactNode`	-
root	`(toast: ToastOptions) => ReactNode`	-
asChild	`boolean`	`false`
dir	`"ltr" \| "rtl"`	`"ltr"`
getRootNode	`() => ShadowRoot \| Node \| Document`	-

createToaster

The createToaster function accepts several options to configure global toast behavior.

Option	Type	Default
duration	`number`	-
gap	`number`	`16`
hotkey	`string[]`	`["altKey", "KeyT"]`
max	`number`	`24`
offsets	`string \| Record<"top" \| "bottom" \| "left" \| "right", string>`	`"1rem"`
overlap	`boolean`	-
pauseOnPageIdle	`boolean`	`false`
placement	`Placement`	`"bottom"`
removeDelay	`number`	`200`

ToastGroup

The container that manages the active toasts.

Prop	Type	Default
toaster	`CreateToasterReturn<any>`	required
children	`(toast: ToastOptions) => ReactNode`	required
asChild	`boolean`	`false`
dir	`"ltr" \| "rtl"`	`"ltr"`
getRootNode	`() => ShadowRoot \| Node \| Document`	-

ToastRoot

The root container for an individual toast.

Prop	Type	Default
asChild	`boolean`	`false`

ToastIndicator

A container for an icon or spinner based on the toast type.

Prop	Type	Default
asChild	`boolean`	`false`

ToastTitle

The title of the toast.

Prop	Type	Default
asChild	`boolean`	`false`

ToastDescription

The supporting text for the toast.

Prop	Type	Default
asChild	`boolean`	`false`

ToastControl

A container for toast action controls.

Prop	Type	Default
asChild	`boolean`	`false`

ToastActionTrigger

A button that triggers the toast action.

Prop	Type	Default
asChild	`boolean`	`false`

ToastCloseTrigger

A button that closes the toast.

Prop	Type	Default
asChild	`boolean`	`false`

ToastContext

Provides access to the current toast state through a render prop.

Prop	Type	Default
children	`(toast: UseToastContext) => ReactNode`	required