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, ToastAction, ToastIcon, ToastMessage } 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 priority="success">
				<ToastIcon />
				<ToastMessage>
					Laborum ea anim adipisicing in Lorem incididunt mollit ipsum reprehenderit.
				</ToastMessage>
				<ToastAction asChild>
					<IconButton type="button" appearance="ghost" size="xs" icon={<X />} label="Dismiss toast" />
				</ToastAction>
			</Toast>,
		)
	}
>
	Show Toast
</Button>