Toast

A transient notification with intent variants for information, success, warnings, and errors.

Installation

import { toast, Toaster } from "@o/pipeline/experimental/components/toast";

Toaster clears every viewport edge by default: 1.5rem on desktop and 1rem on mobile, plus the corresponding physical env(safe-area-inset-*) value. It uses fixed viewport positioning, and direct env() values preserve that clearance when surrounding content has already consumed its safe area. Pass offset or mobileOffset to own the full Sonner offset configuration explicitly; app theme selection remains a consumer concern.

Variants

Each intent sets its own icon and color to signal the message type:

Information (default)

Success

Error

Warning

Options

Toasts accept supporting content in addition to the title:

Description text