Auto-Dismissive Toast
import { h } from "preact"
import { ToastAction, Toaster, useToast } from "@/comps/echo/toast"
export const DismissiveDemo = () => {
const { toast } = useToast()
return <div class="w-[400px] h-[300px] bg-gray-200 justify-start items-start pl-10 pt-10">
<button
class="w-[200px] mb-4"
onClick={() => {
toast({
variant: "success",
title: "Settings saved",
description: "All changes written to disk",
action: <ToastAction onClick={() => console.log("Revert clicked")}>Revert</ToastAction>,
duration: 3000 // sticky unless specified
})
}}
>Save Settings</button>
<Toaster />{/* Toaster should be put in your root comp */}
</div>
}
Destructive Variant
import { h } from "preact"
import { Toaster, useToast } from "@/comps/echo/toast"
export const DestructiveDemo = () => {
const { toast } = useToast()
return <div class="w-[400px] h-[300px] bg-gray-200 justify-start items-start pl-10 pt-10">
<button
class="w-[200px] bg-red-600 hover:bg-red-500"
onClick={() => {
toast({
variant: "destructive",
title: "Oh no! Something's not right",
description: "There was an error processing your request"
})
}}
>Error</button>
{/* Toaster should be put in your root comp */}
<Toaster />
</div>
}