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! 🙏
UI DocsECHODialog

Uncontrolled Dialog

import { h } from "preact" import { Dialog } from "@/comps/echo/dialog" export const UncontrolledDemo = () => { return ( <div class="echo-theme p-[24px]"> <Dialog trigger={() => <button class="mb-2">Open plain Dialog</button>} title="Hello traveller!" description="Put anything you want here - even <Slider /> or <VirtualList />." footer={() => ( <button onClick={(/* e */) => console.log("dismissed!")}> Got it </button> )} > <div>{`(っ◕‿◕)っ`}</div> </Dialog> </div> ) }

Controlled Dialog

import { h } from "preact" import { useState } from "preact/hooks" import { Dialog } from "@/comps/echo/dialog" export const ControlledDemo = () => { const [open, setOpen] = useState(false) return ( <div class="echo-theme p-[24px]"> <Dialog open={open} onOpenChange={setOpen} trigger={() => ( <button onClick={() => setOpen(true)} class="mb-2"> Open plain Dialog </button> )} title="Hello traveller!" description="Put anything you want here – even <Slider /> or <VirtualList />." footer={() => ( <button onClick={() => setOpen(false)}> Got it </button> )} > <div>{`=^..^=`}</div> </Dialog> </div> ) }

Confirmation Dialog

import { h } from "preact" import { useState } from "preact/hooks" import { ConfirmDialog } from "@/comps/echo/dialog" export const ConfirmDemo = () => { const [showConfirm, setShowConfirm] = useState(false) return ( <div class="echo-theme p-[24px]"> <button class="mb-2" onClick={() => setShowConfirm(true)}>Confirm…</button> <ConfirmDialog open={showConfirm} onOpenChange={setShowConfirm} title="Delete Object?" description="This cannot be undone." onConfirm={() => console.log("DELETE!")} onCancel={() => console.log("phew… safe!")} confirmLabel="Yes, delete" cancelLabel="No, keep it" /> </div> ) }

Prompt Dialog

import { h } from "preact" import { useState } from "preact/hooks" import { PromptDialog } from "@/comps/echo/dialog" export const PromptDemo = () => { const [showPrompt, setShowPrompt] = useState(false) return ( <div class="echo-theme p-[24px]"> <button class="mb-2" onClick={() => setShowPrompt(true)}>Prompt…</button> <PromptDialog open={showPrompt} onOpenChange={setShowPrompt} title="Give it a name" defaultValue="Untitled" onSubmit={val => console.log("user typed:", val)} /> </div> ) }

Info Dialog

import { h } from "preact" import { useState } from "preact/hooks" import { InfoDialog } from "@/comps/echo/dialog" export const InfoDemo = () => { const [showInfo, setShowInfo] = useState(false) return ( <div class="echo-theme p-[24px]"> <button onClick={() => setShowInfo(true)}>Info…</button> <InfoDialog open={showInfo} onOpenChange={setShowInfo} title="Heads-up" description="All systems nominal." onAction={() => console.log("closed info")} /> </div> ) }