Toast

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

1import { Button } from "@ngrok/mantle/button";2import { makeToast, Toast } from "@ngrok/mantle/toast";3 4// Only one <Toaster /> should be rendered at a time5// add it to the root of your app6<Toaster />7 8<Button9	type="button"10	onClick={() =>11		// make some toast! 🍞😋12		makeToast(13			<Toast.Root priority="success">14				<Toast.Icon />15				<Toast.Message>16					Laborum ea anim adipisicing in Lorem incididunt mollit ipsum reprehenderit.17				</Toast.Message>18				<Toast.Action asChild>19					<IconButton type="button" appearance="ghost" size="xs" icon={<XIcon />} label="Dismiss toast" />20				</Toast.Action>21			</Toast.Root>,22		)23	}24>25	Show Toast26</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. You can keep toasts open until manually dismissed by passing a value <= 0 or `Number.POSITIVE_INFINITY`.
`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.

All props from div, plus:

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.

All props from p, plus:

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.

All props from button, plus:

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
`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.