1
2
3
4
5
6
7
8
9
10
11/** @jsxImportSource @bext-stack/framework */// src/components/ui/toast.tsx: the island appends a toast element to [data-ui="toast-region"] and// auto-dismisses it. Trigger from anywhere with a button carrying data-ui="toast-demo".functionshowToast(title, desc) {
var region = document.querySelector('[data-ui="toast-region"]');
var t = document.createElement('div');
t.setAttribute('role', 'status'); // the region itself is role="region" aria-live="polite"
t.className = 'pointer-events-auto mb-2 rounded-md border bg-background p-4 shadow-lg animate-slide-bottom';
t.innerHTML = '<div class="text-sm font-semibold">' + title + '</div><div class="text-sm text-muted-foreground">' + desc + '</div>';
region.appendChild(t); setTimeout(function(){ t.remove(); }, 4000);
}
Installation
Terminal
$ bext ui add toast
Copy and paste the following into src/components/ui/toast.tsx.
toast.tsx
1
2
3
4
5
6
7
8
9
10
11/** @jsxImportSource @bext-stack/framework */// src/components/ui/toast.tsx: the island appends a toast element to [data-ui="toast-region"] and// auto-dismisses it. Trigger from anywhere with a button carrying data-ui="toast-demo".functionshowToast(title, desc) {
var region = document.querySelector('[data-ui="toast-region"]');
var t = document.createElement('div');
t.setAttribute('role', 'status'); // the region itself is role="region" aria-live="polite"
t.className = 'pointer-events-auto mb-2 rounded-md border bg-background p-4 shadow-lg animate-slide-bottom';
t.innerHTML = '<div class="text-sm font-semibold">' + title + '</div><div class="text-sm text-muted-foreground">' + desc + '</div>';
region.appendChild(t); setTimeout(function(){ t.remove(); }, 4000);
}
This component is interactive. Make sure the shared island is loaded (see Islands). It reacts to data-ui="toast" hooks.
Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom: fine-grained reactivity, no virtual DOM.
src/app/page.tsx2 files · signals · runs in your browser
import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";
// A normal PRISM server page. The island below is rendered to HTML on the
// server, then hydrated on the client - only the signal-bound nodes update.
export default function Page() {
return (
<main style="max-width:680px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif;color:#0a0a0a">
<h1 style="letter-spacing:-0.02em;margin-bottom:4px">Toast</h1>
<p style="color:#64748b;margin-top:0">A button pushes onto a list signal; each toast self-removes after ~3s.</p>
{signalsIsland("Showcase", Showcase, {})}
</main>
);
}
Pure PRISM + real bext signals: fine-grained, no re-render.
src/app/page.tsx2 files · react · runs in your browser
import Showcase from "../components/Showcase";
// A button that pushes a transient toast notification, which
// auto-dismisses after a few seconds (useState + setTimeout).
export default function Page() {
return (
<main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
<h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Toast</h1>
<p style={{ color: "#64748b", marginTop: 0 }}>A brief notification that dismisses itself.</p>
<Showcase />
</main>
);
}