Toast
A succinct message that is displayed temporarily.
/** @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".
function showToast(title, desc) {
var region = document.querySelector('[data-ui="toast-region"]');
var t = document.createElement('div');
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
$ bext ui add toast
Copy and paste the following into src/components/ui/toast.tsx.
/** @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".
function showToast(title, desc) {
var region = document.querySelector('[data-ui="toast-region"]');
var t = document.createElement('div');
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.
On This Page