npm install @radix-ui/react-toast

import { Toast } from "radix-ui";

export default () => (
	<Toast.Provider>
		<Toast.Root>
			<Toast.Title />
			<Toast.Description />
			<Toast.Action />
			<Toast.Close />
		</Toast.Root>

		<Toast.Viewport />
	</Toast.Provider>
);

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "hotkey",
		type: "string[]",
		default: '["F8"]',
		description: (
			<span>
				The keys to use as the keyboard shortcut that will move focus to the
				toast viewport. Use <Code>event.code</Code> value for each key from{" "}
				<Link href="https://keycode.info/" variant="blue" target="_blank">
					keycode.info
				</Link>
				. For meta keys, use <Code>ctrlKey</Code>, <Code>shiftKey</Code>,{" "}
				<Code>altKey</Code> and/or <Code>metaKey</Code>.
			</span>
		),
	},
	{
		name: "label",
		type: "string",
		default: '"Notifications ({hotkey})"',
		description:
			"An author-localized label for the toast region to provide context for screen reader users when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.",
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "type",
		type: '"foreground" | "background"',
		typeSimple: "enum",
		default: '"foreground"',
		description: (
			<span>
				Control the{" "}
				<Link
					href="/primitives/docs/components/toast#sensitivity"
					variant="blue"
				>
					sensitivity
				</Link>{" "}
				of the toast for accessibility purposes. For toasts that are the
				result of a user action, choose <Code>foreground</Code>. Toasts
				generated from background tasks should use <Code>background</Code>.
			</span>
		),
	},
	{
		name: "duration",
		type: "number",
		description:
			"The time in milliseconds that should elapse before automatically closing the toast. This will override the value supplied to the provider.",
	},
	{
		name: "defaultOpen",
		type: "boolean",
		default: "true",
		description:
			"The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.",
	},
	{
		name: "open",
		type: "boolean",
		description: (
			<span>
				The controlled open state of the dialog. Must be used in conjunction
				with <Code>onOpenChange</Code>.
			</span>
		),
	},
	{
		name: "onOpenChange",
		type: "(open: boolean) => void",
		typeSimple: "function",
		description:
			"Event handler called when the open state of the dialog changes.",
	},
	{
		name: "onEscapeKeyDown",
		type: "(event: KeyboardEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the escape key is down. It can be prevented
				by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onPause",
		type: "() => void",
		typeSimple: "function",
		description:
			"Event handler called when the dismiss timer is paused. This occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.",
	},
	{
		name: "onResume",
		type: "() => void",
		typeSimple: "function",
		description:
			"Event handler called when the dismiss timer is resumed. This occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.",
	},
	{
		name: "onSwipeStart",
		type: "(event: SwipeEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when starting a swipe interaction. It can be
				prevented by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onSwipeMove",
		type: "(event: SwipeEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called during a swipe interaction. It can be prevented
				by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onSwipeEnd",
		type: "(event: SwipeEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called at the end of a swipe interaction. It can be
				prevented by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onSwipeCancel",
		type: "(event: SwipeEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when a swipe interaction is cancelled. It can be
				prevented by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description:
			"Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.",
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "altText",
		required: true,
		type: "string",
		description: (
			<>
				Describe an{" "}
				<Link variant="subtle" href="./toast#alternative-action">
					alternative way to achieve the action
				</Link>{" "}
				for screen reader users who cannot access the toast easily.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

<Toast.Provider>
	<Toast.Viewport __hotkey__={["altKey", "KeyT"]} />
</Toast.Provider>

<Toast.Root __duration__={3000}>
	<Toast.Description>Saved!</Toast.Description>
</Toast.Root>

export default () => {
	const [savedCount, setSavedCount] = React.useState(0);

	return (
		<div>
			<form onSubmit={() => setSavedCount((count) => count + 1)}>
				<button>save</button>
			</form>

			{Array.from({ length: savedCount }).map((_, index) => (
				<Toast.Root key={index}>
					<Toast.Description>Saved!</Toast.Description>
				</Toast.Root>
			))}
		</div>
	);
};

// index.jsx
import { Toast } from "radix-ui";
import "./styles.css";

export default () => (
	<Toast.Provider __swipeDirection__="right">
		<Toast.Root __className__="ToastRoot">...</Toast.Root>
		<Toast.Viewport />
	</Toast.Provider>
);

/* styles.css */
.ToastRoot[__data-swipe__="move"] {
	transform: translateX(var(__--radix-toast-swipe-move-x__));
}
.ToastRoot[__data-swipe__="cancel"] {
	transform: translateX(0);
	transition: transform 200ms ease-out;
}
.ToastRoot[__data-swipe__="end"] {
	animation: slideRight 100ms ease-out;
}

@keyframes slideRight {
	from {
		transform: translateX(var(__--radix-toast-swipe-end-x__));
	}
	to {
		transform: translateX(100%);
	}
}

<Toast.Root type="foreground">
	<Toast.Description>File removed successfully.</Toast.Description>
	<Toast.Close>Dismiss</Toast.Close>
</Toast.Root>

<Toast.Root type="background">
	<Toast.Description>We've just released Radix 1.0.</Toast.Description>
	<Toast.Close>Dismiss</Toast.Close>
</Toast.Root>

<Toast.Root type="background">
	<Toast.Title>Upgrade Available!</Toast.Title>
	<Toast.Description>We've just released Radix 1.0.</Toast.Description>
	<Toast.Action altText="Goto account settings to upgrade">
		Upgrade
	</Toast.Action>
	<Toast.Close>Dismiss</Toast.Close>
</Toast.Root>

<Toast.Root __type__="foreground" __duration__={10000}>
	<Toast.Description>File removed successfully.</Toast.Description>
	<Toast.Action altText="Undo (Alt+U)">
		Undo <kbd>Alt</kbd>+<kbd>U</kbd>
	</Toast.Action>
	<Toast.Close>Dismiss</Toast.Close>
</Toast.Root>

<Toast.Root type="foreground">
	<Toast.Description>Saved!</Toast.Description>
	<Toast.Close aria-label="Close">
		<span aria-hidden>×</span>
	</Toast.Close>
</Toast.Root>

import { Toast } from "./your-toast";

export default () => (
	<Toast title="Upgrade available" content="We've just released Radix 3.0!">
		<button onClick={handleUpgrade}>Upgrade</button>
	</Toast>
);

// your-toast.jsx
import { Toast as ToastPrimitive } from "radix-ui";

export const Toast = ({ title, content, children, ...props }) => {
	return (
		<ToastPrimitive.Root {...props}>
			{title && <ToastPrimitive.Title>{title}</ToastPrimitive.Title>}
			<ToastPrimitive.Description>{content}</ToastPrimitive.Description>
			{children && (
				<ToastPrimitive.Action asChild>{children}</ToastPrimitive.Action>
			)}
			<ToastPrimitive.Close aria-label="Close">
				<span aria-hidden>×</span>
			</ToastPrimitive.Close>
		</ToastPrimitive.Root>
	);
};

import { Toast } from "./your-toast";

export default () => {
	const savedRef = React.useRef();
	return (
		<div>
			<form onSubmit={() => savedRef.current.publish()}>
				<button>Save</button>
			</form>
			<Toast ref={savedRef}>Saved successfully!</Toast>
		</div>
	);
};

// your-toast.jsx
import * as React from "react";
import { Toast as ToastPrimitive } from "radix-ui";

export const Toast = React.forwardRef((props, forwardedRef) => {
	const { children, ...toastProps } = props;
	const [count, setCount] = React.useState(0);

	React.useImperativeHandle(forwardedRef, () => ({
		publish: () => setCount((count) => count + 1),
	}));

	return (
		<>
			{Array.from({ length: count }).map((_, index) => (
				<ToastPrimitive.Root key={index} {...toastProps}>
					<ToastPrimitive.Description>{children}</ToastPrimitive.Description>
					<ToastPrimitive.Close>Dismiss</ToastPrimitive.Close>
				</ToastPrimitive.Root>
			))}
		</>
	);
});