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:

Toast.Root

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

All props from div, plus:

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.

Toast.Message

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

All props from p, plus:

Toast.Action

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

All props from button, plus:

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: