Toast

A succinct message that is displayed temporarily. Toasts are used to provide feedback to the user without interrupting their workflow.

import { Button } from "@ngrok/mantle/button";
import { makeToast, Toast } from "@ngrok/mantle/toast";

// Only one <Toaster /> should be rendered at a time
// add it to the root of your app
<Toaster />

<Button
	type="button"
	onClick={() =>
		// make some toast! 🍞😋
		makeToast(
			<Toast.Root priority="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" size="xs" icon={<XIcon />} label="Dismiss toast" />
				</Toast.Action>
			</Toast.Root>,
		)
	}
>
	Show Toast
</Button>

API Reference

Toaster

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

Prop	Type	Default	Description
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	number	4000	Time in milliseconds that should elapse before automatically dismissing toasts. When set here, this will be the default duration for all toasts.
containerAriaLabel	string	—	Aria 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. It accepts the following props in addition to the standard HTML div attributes.

Prop	Type	Default	Description
priority	info success warning danger	—	The priority level of the toast, which determines the visual styling and default icon.
asChild	boolean	false	Use the `asChild` prop to compose the `Toast.Root` styling and functionality onto alternative element types or your own React components.

Toast.Icon

The Toast.Icon displays an icon representing the toast priority. If no custom icon is provided, a default icon for the priority is used.

Prop	Type	Default	Description
svg	ReactNode	—	A custom SVG icon to display. If not provided, the default icon for the toast priority will be used.

Toast.Message

The Toast.Message contains the main text content of the toast. It accepts the following props in addition to the standard HTML paragraph attributes.

Prop	Type	Default	Description
asChild	boolean	false	Use 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. It accepts the following props in addition to the standard HTML button attributes.

Prop	Type	Default	Description
asChild	boolean	false	Use the `asChild` prop to compose the `Toast.Action` styling and functionality onto alternative element types or your own React components.

Note: You can prevent the toast from being dismissed on click by calling event.preventDefault() in your onClick handler.

makeToast

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

Prop Type Default Description

Prop	Type	Default	Description
children	ReactNode	—	The React component to render inside the toast container. Typically a `Toast.Root` component.
options	MakeToastOptions	—	Optional configuration object with the following properties: `duration_ms` (number, optional): Time in milliseconds before auto-dismissal `id` (string, optional): Custom ID for the toast

children

ReactNode

—

The React component to render inside the toast container. Typically a Toast.Root component.

options

MakeToastOptions

—

Optional configuration object with the following properties:

duration_ms (number, optional): Time in milliseconds before auto-dismissal
id (string, optional): Custom ID for the toast