Toast

Source

"use client"

import { useState } from "react"
import { Button } from "@/registry/warren/button/button"
import { Toast } from "@/registry/warren/toast/toast"

type DemoToast = {
  tone: "default" | "success" | "danger" | "warning"
  title: string
  description: string
}

const demos: DemoToast[] = [
  { tone: "success", title: "RUN SYNCED", description: "12 RUNS ACCEPTED" },
  { tone: "danger", title: "DRAFT REJECTED", description: "SEQUENCE MISMATCH · 02:13:45" },
  { tone: "warning", title: "THROUGHPUT DEGRADED", description: "GATE 3 AT 78%" },
]

const buttonVariant: Record<DemoToast["tone"], "primary" | "danger" | "warning" | "outline"> = {
  default: "outline",
  success: "primary",
  danger: "danger",
  warning: "warning",
}

export default function ToastDemo() {
  const [toast, setToast] = useState<DemoToast | null>(null)
  return (
    <div className="flex flex-col items-center gap-8 py-12">
      <div className="flex flex-wrap items-center justify-center gap-4">
        {demos.map((d) => (
          <Button key={d.title} variant={buttonVariant[d.tone]} onClick={() => setToast(d)}>
            PUSH {d.tone.toUpperCase()}
          </Button>
        ))}
      </div>
      {toast ? (
        <Toast
          className="w-full max-w-sm"
          title={toast.title}
          description={toast.description}
          tone={toast.tone}
          duration={3000}
          onDismiss={() => setToast(null)}
        />
      ) : null}
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/toast.json

Usage

import { Toast } from "@/components/ui/toast"

<Toast
  title="DRAFT REJECTED"
  description="02:13:45.102"
  tone="danger"
  onDismiss={() => setToast(null)}
/>

Toast is a transient alert: a bordered panel with a 2px tone accent on its left edge that auto-dismisses after duration (default 5000ms). The title uses the tone's text-grade token; the description renders muted. Mount plays a 0.4s fade-in.

Tones

default · success · danger · warning

Signal tones color both the left accent (saturated border) and the title (text-grade ink). danger renders role="alert"; the other tones render role="status".

Timer behavior

The dismiss timer clears on unmount, pauses on hover (pointerenter/pointerleave), and pauses on keyboard focus (focus/blur) so an operator — pointer or keyboard — can read an alert without it vanishing. The close button (aria-label="Dismiss") and the timer both call onDismiss.

Stacking & history

Toast is a single alert card, not a region. Compose multiple transient alerts stacked bottom-right of the viewport (each one its own role="status"/role="alert" card) if a spike of alerts is expected — but per the design system, Toast is for transient signals only. For a persistent audit trail use LogList or Ledger; a toast that must survive the session is history, not a notification.

API Reference

Prop

Type