Toast

A brief message displayed to give feedback about an action or event.

Show toast

import { Toast } from '@ontoui/react';

function MyToasts() {
  const { toasts, add } = Toast.useToastManager();
  return (
    <>
      <button
        onClick={() => add({ title: 'Saved!', description: 'Your changes have been saved.' })}
      >
        Save
      </button>
      <Toast.Viewport>
        {toasts.map((toast) => (
          <Toast.Root key={toast.id} toast={toast}>
            <Toast.Content>
              <Toast.Title>{toast.title}</Toast.Title>
              <Toast.Description>{toast.description}</Toast.Description>
              <Toast.Close>✕</Toast.Close>
            </Toast.Content>
          </Toast.Root>
        ))}
      </Toast.Viewport>
    </>
  );
}

<Toast.Provider>
  <MyToasts />
</Toast.Provider>;

Anatomy

The Toast compound component is made up of the following parts:

Part	Description
Toast.Provider	Provides toast context. Wrap your app (or a subtree) with this once.
Toast.Viewport	Fixed-position container that renders all active toasts via a portal.
Toast.Root	Root element for an individual toast. Requires a toast object from the manager.
Toast.Content	Container for toast content. Handles overflow and stacking animations.
Toast.Title	Heading that labels the toast.
Toast.Description	Body text describing the event.
Toast.Close	Button that dismisses the toast.
Toast.Action	Optional action button inside the toast (e.g. “Undo”).

Use Toast.useToastManager() inside a Toast.Provider to get the add, close, and update methods.

Examples

With action

Use Toast.Action to give users a way to respond to the notification.

Delete file

<Toast.Action onClick={() => close(toast.id)}>Undo</Toast.Action>

API Reference

Toast.Provider

Prop	Type	Default
children?	ReactNode	—
limit?	number	—
timeout?	number	—
toastManager?	ToastManager<any>	—

Toast.Viewport

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Toast.Root

Prop	Type	Default
children?	ReactNode	—
className?	string	—
toast	ToastRootToastObject<any>	—
swipeDirection?	"up" | "down" | "left" | "right" | ("up" | "down" | "left" | "right")[]	—
ref?	Ref<HTMLDivElement>	—

Toast.Content

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Toast.Title

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Toast.Description

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Toast.Close

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Toast.Action

Prop	Type	Default
children?	ReactNode	—
className?	string	—
onClick?	MouseEventHandler<HTMLButtonElement>	—
ref?	Ref<HTMLDivElement>	—