Dialog
A window overlaid on either the primary window or another dialog window.
Edit profile
Make changes to your profile here. Click save when you're done.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/dialog.tsx — opened by data-ui="open" data-target, closed by data-ui="close"
export function Dialog(o) {
return \`<button data-ui="open" data-target="#\${o.id}" class="\${o.triggerClass}">\${o.trigger}</button>
<div id="\${o.id}" data-overlay hidden class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div data-ui="overlay-bg" class="absolute inset-0 bg-black/80"></div>
<div class="relative z-10 grid w-full max-w-lg gap-4 rounded-lg border bg-background p-6 shadow-lg">
<button data-ui="close" class="absolute right-4 top-4 opacity-70 hover:opacity-100">✕</button>\${o.children}</div></div>\`;
}
Installation
$ bext ui add dialog
Copy and paste the following into src/components/ui/dialog.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/dialog.tsx — opened by data-ui="open" data-target, closed by data-ui="close"
export function Dialog(o) {
return \`<button data-ui="open" data-target="#\${o.id}" class="\${o.triggerClass}">\${o.trigger}</button>
<div id="\${o.id}" data-overlay hidden class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div data-ui="overlay-bg" class="absolute inset-0 bg-black/80"></div>
<div class="relative z-10 grid w-full max-w-lg gap-4 rounded-lg border bg-background p-6 shadow-lg">
<button data-ui="close" class="absolute right-4 top-4 opacity-70 hover:opacity-100">✕</button>\${o.children}</div></div>\`;
}
This component is interactive — make sure the shared island is loaded (see Islands). It reacts to data-ui="dialog" hooks.
On This Page