Skip to Content
We're rolling out the first batch of Game UIs right now, and it might take a few days to fully wrap up. If you're already testing the UI comps, we'd love to hear any feedback you've got! 🙏

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> }