Toast

Short feedback after an action, shown in a corner and gone after a few seconds. Use it to confirm what happened without moving people away from their work.

InstallationCopy Anchor Link

Set up Camaleo once (Installation), then import what you need.

import { ToastProvider, useToast } from "@camaleo/react";

One provider for the whole appCopy Anchor Link

Put ToastProvider once, near the root, inside your StyleProvider. It renders the corner where toasts stack and the live region that reads them out. Two providers mean two stacks that overlap and two voices for screen readers.

import { StyleProvider, ToastProvider } from "@camaleo/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="en">
			<body>
				<StyleProvider styleName="editorial">
					<ToastProvider closeLabel="Close">{children}</ToastProvider>
				</StyleProvider>
			</body>
		</html>
	);
}

Then call useToast() in any component below it:

const toast = useToast();
toast.add({ title: "Preferences saved", type: "success" });

AnatomyCopy Anchor Link

A corner of the screen (the viewport) that stacks the toasts. Each toast has the tone's icon, a title, an optional description and action, and a close button.

ExamplesCopy Anchor Link

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above. Each one brings its own ToastProvider only so it runs alone on this page; in your app, use the one at the root.

In contextCopy Anchor Link

Toasts confirm actions taken elsewhere on the page. These are whole pieces of UI you can copy, in the skin you picked.

GuidelinesCopy Anchor Link

PropsCopy Anchor Link

Styling hooksCopy Anchor Link

Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the viewport.

AccessibilityCopy Anchor Link

• Toasts are read out politely, after what the screen reader is saying. With priority: "high", they interrupt.
• A toast never takes focus, so it never interrupts typing.
• The timer pauses while the pointer is over the stack or focus is inside it.
• If a toast has an action, make sure people can do the same thing somewhere else on the page, or use timeout: 0. Not everyone reaches it in 5 seconds.

RelatedCopy Anchor Link