Sonner

An opinionated toast component for PRISM.

tsx

1
2
3
4<Toaster richColors />

<Button onClick={() => window.dispatchEvent(new CustomEvent("bext-toast",
  { detail: { title: "Saved!", variant: "success" } }))}>Save</Button>

Sonner — système de toast opinionné (stacking, swipe-to-dismiss, promise/loading states). Composant unique Toaster à monter une seule fois dans le layout ; les toasts sont ensuite déclenchés depuis un island via window.dispatchEvent(new CustomEvent("bext-toast", {...})).

Alternative "batteries incluses" au primitif Toast de shadcn (nous n'exposons pas encore ce dernier — utiliser Sonner par défaut).

Installation

Terminal

$ bext ui add sonner

Usage

tsx

1
2
3
4
5
6
7
8
9import { Toaster } from "@bext-stack/ui/primitives"

// Dans _layout.tsx (une fois) :
<Toaster richColors />

// Puis n'importe où dans un island :
window.dispatchEvent(new CustomEvent("bext-toast", {
  detail: { title: "Saved!", variant: "success" }
}))

Anatomy

<Toaster position="bottom-right" richColors? />

API Reference

Toaster

Prop	Type	Default	Description
position	"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	"bottom-right"	undefined
richColors	boolean	—	success/error/warning tinted au lieu de neutre.
closeButton	boolean	—	Bouton × sur chaque toast.
duration	number	4000	Ms avant auto-dismiss.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="sonner"	Toaster root	undefined	undefined
data-position	container	"bottom-right" \| ...	undefined

Keyboard

Key	Action
`Escape`	Ferme le toast focus.

Accessibility

Chaque toast porte role="status" pour un update passif, ou role="alert" pour une erreur importante. Le container est un <section aria-label="Notifications">.

Try it live

Open in play

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.tsx 2 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">Sonner</h1>
      <p style="color:#64748b;margin-top:0">Stacked bottom-right success toasts from a list signal; each self-dismisses.</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// Sonner-style toasts: success notifications stacked bottom-right,
// each auto-dismissing 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 }}>Sonner</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>Stacked, self-dismissing success notifications.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Slider Spinner →

On This Page