Toast
A succinct message that is displayed temporarily.
When to use
Use a toast to confirm that an action the user already left behind has finished, or to report a non-blocking failure with a retry. If the message must stay on screen until it is resolved, use Alert; if the user has to decide before anything continues, use AlertDialog.
Platform notes
sonner is the mandated toast library for Platform apps per ARCHITECTURE.md; the copy previewed in this catalog is the Radix based Toast with a use-toast hook, so follow whichever one your app installed and do not run both. Mount the toaster exactly once, in the providers module under app/, never inside a view. Title, description and action label are all react-i18next messages, and the action needs an altText for screen readers as the demo shows. Because shadows paint nothing, a toast is separated from the page by its border and surface: the destructive variant switches to --destructive, so check the contrast of any action button you place inside it.
Install
npx shadcn@latest add toastCode
"use client";
import { Button } from "@/components/ui/button";
import { Toast, ToastAction, ToastDescription, ToastTitle } from "@/components/ui/toast";
import { useToast } from "@/hooks/use-toast";
export function ToastDemo() {
const { toast } = useToast();
return (
<div className="flex flex-wrap gap-3">
<Button
variant="outline"
onClick={() => {
toast({
title: "Theme updated",
description: "The Platform theme was applied successfully.",
});
}}
>
Show toast
</Button>
<Button
variant="outline"
onClick={() => {
toast({
variant: "destructive",
title: "Something went wrong",
description: "Failed to sync components. Please try again.",
action: <ToastAction altText="Try again">Try again</ToastAction>,
});
}}
>
Show error
</Button>
</div>
);
}