Skip to main content
/mantle

Toast

A succinct message that appears temporarily. Toasts give the user feedback without interrupting their workflow.

import { Button, IconButton } from "@ngrok/mantle/button";import { makeToast, Toast, Toaster } from "@ngrok/mantle/toast";import { XIcon } from "@phosphor-icons/react/X"; // Only one <Toaster /> should be rendered at a time// add it to the root of your app<Toaster /> <Button	type="button"	appearance="outlined"	intent="neutral"	onClick={() =>		// make some toast! 🍞😋		makeToast(			<Toast.Root intent="success">				<Toast.Icon />				<Toast.Message>					Laborum ea anim adipisicing in Lorem incididunt mollit ipsum reprehenderit.				</Toast.Message>				<Toast.Action asChild>					<IconButton						type="button"						appearance="ghost"						intent="neutral"						size="xs"						icon={<XIcon />}						label="Dismiss toast"					/>				</Toast.Action>			</Toast.Root>,		)	}>	Show Toast</Button>

Composition

Compose the parts of a Toast together to build your own:

Toast.Root├── Toast.Icon├── Toast.Message└── Toast.Action

Polymorphism

Toast.Action and Toast.Message accept asChild. When true the part renders its single child instead of its default element, forwarding class names, data-* attributes, and ref onto that child.

Reach for Toast.Action asChild when the action must be a link ("View logs" navigating rather than firing a handler), and Toast.Message asChild when the message needs its own element to carry richer markup.

Toast.Icon takes its element through the svg prop and clones it, so it needs no asChild.

Toast.Root does not take asChild. The root renders the intent accent bar alongside the label div holding your children, so a slot would receive two elements. Style the toast surface with className instead.

API Reference

Toaster

The Toaster component renders all toasts. It accepts the following props:

PropTypeDefaultDescription
position?"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right""top-center"The position where toasts will appear on the screen.
duration_ms?number4000Time in milliseconds before toasts dismiss automatically. When set here, this is the default duration for all toasts. Pass a value <= 0 or Number.POSITIVE_INFINITY to keep toasts open until manually dismissed.
containerAriaLabel?stringARIA label for the toast container for screen readers.
dir?"ltr" | "rtl"Direction of text for internationalization support.

Toast.Root

The Toast.Root is the container for a toast message.

children render inside a <div data-slot="toast-label">. The intent accent bar is a permanent element sibling, so without the wrapper a bare text child is never a lone child: a browser translation engine reparents that text node, and the removal React runs when the content changes shape or goes away throws. The wrapper is a <div> because Toast.Message renders a <p>, which a <span> may not contain. It is display: contents, so the icon, the message, and an action stay flex items of the root and Toast.Message's flex-1 still resolves. Browser translation covers the mechanism and the rules your own components need.

All props from div, plus:

PropTypeDefaultDescription
intent"info" | "success" | "warning" | "danger"The tone of the toast. Determines the visual styling and default icon that communicate the status it reports.

Data attributes

Data AttributeValueDescription
data-slot"toast"On the toast root.
data-slot"toast-label"On the <div> wrapping children, not only the message text.

Toast.Icon

The Toast.Icon displays an icon for the toast intent. When svg is omitted, the intent's default icon renders.

PropTypeDefaultDescription
svg?ReactNodeA custom SVG icon to display. When omitted, the toast intent's default icon renders.

Toast.Message

The Toast.Message contains the main text content of the toast.

All props from p, plus:

PropTypeDefaultDescription
asChild?booleanfalseUse the asChild prop to compose the Toast.Message styling and functionality onto alternative element types or your own React components.

Toast.Action

The Toast.Action is a button that dismisses the toast when clicked.

All props from button, plus:

PropTypeDefaultDescription
asChild?booleanfalseUse the asChild prop to compose the Toast.Action styling and functionality onto alternative element types or your own React components.

To keep the toast open on click, call event.preventDefault() in your onClick handler.

makeToast

The makeToast function creates and displays a toast. It accepts the following parameters:

PropTypeDefaultDescription
childrenReactNodeThe React component to render inside the toast container. Typically a Toast.Root component.
options?MakeToastOptionsOptional configuration object with the following properties: duration_ms (number, optional) — time in milliseconds before auto-dismissal; id (string, optional) — custom ID for the toast.