Toast

Stable

Transient telemetry notifications featuring animated laser countdown progress meters, acrylic frosted backdrops, and semantic urgency tokens.

Installation

$pnpm add @siberui/react

Import & Provider Setup

Wrap your root layout or application tree with ToastProvider, then consume the useToast() hook in any interactive component.

tsx
// 1. In your layout or root provider:
import { ToastProvider } from '@siberui/react';

export default function RootLayout({ children }) {
  return (
    <ToastProvider position="bottom-right" maxToasts={5}>
      {children}
    </ToastProvider>
  );
}

// 2. In any child component:
import { useToast, Button } from '@siberui/react';

export function DispatchButton() {
  const { toast } = useToast();

  return (
    <Button onClick={() => toast({
      title: 'Neural Link Synchronized',
      description: 'Quantum handshake established with node FRA-04.',
      variant: 'info'
    })}>
      Transmit Notification
    </Button>
  );
}

Interactive Toast Dispatcher

Click the triggers below to spawn active live notifications in the bottom-right corner of the viewport.

tsx
const { toast } = useToast();

<Button onClick={() => toast({
  title: 'Neural Link Synchronized',
  description: 'Quantum handshake established with node FRA-04.',
  variant: 'info'
})}>
  Trigger Cyan Info
</Button>

Variant Anatomy & Countdown Bars

Each toast renders a top hairline laser wire and a bottom real-time countdown progress indicator.

Neural Link Active

Quantum synchronization confirmed.

Packet Verified

Zero checksum errors in frame buffer.

Thermal Throttling

Junction temperature reached 84°C.

Perimeter Breach

Unauthorized root handshake blocked.

tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
  {/* Cyan Info Notification */}
  <div className="relative flex items-start gap-3.5 p-4 rounded-xl bg-white/[0.04] border border-cyan-500/20 backdrop-blur-xl shadow-xl overflow-hidden">
    <Info className="h-[18px] w-[18px] text-cyan-400 shrink-0" />
    <div className="flex-1 space-y-0.5">
      <p className="text-sm font-semibold text-cyan-200">Neural Link Active</p>
      <p className="text-xs text-slate-400">Quantum synchronization confirmed.</p>
    </div>
    <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-cyan-400/30" />
  </div>

  {/* Emerald Success Notification */}
  <div className="relative flex items-start gap-3.5 p-4 rounded-xl bg-white/[0.04] border border-emerald-500/20 backdrop-blur-xl shadow-xl overflow-hidden">
    <CheckCircle2 className="h-[18px] w-[18px] text-emerald-400 shrink-0" />
    <div className="flex-1 space-y-0.5">
      <p className="text-sm font-semibold text-emerald-200">Packet Verified</p>
      <p className="text-xs text-slate-400">Zero checksum errors in frame buffer.</p>
    </div>
    <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-emerald-400/30" />
  </div>
</div>

Viewport Placement Matrix

Configure notification anchor anchors across 6 discrete screen coordinates:

top-left
SUPPORTED
top-center
SUPPORTED
top-right
SUPPORTED
bottom-left
SUPPORTED
bottom-center
SUPPORTED
bottom-right
SUPPORTED

Frosted Cyber-Glass Telemetry Event Banner

Combine frosted glass toast feeds with circuit substrate textures and border sweeps.

EVENT FEED EMITTER
STANDBY
AUTOMATIC PACKET ROTATION

Dispatched 480 encrypted frames across secondary orbital transponder.

tsx
<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-4">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Bell className="h-4 w-4 text-cyan-400 animate-pulse" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">EVENT FEED EMITTER</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">STANDBY</Badge>
    </div>

    <div className="p-4 rounded-xl bg-white/[0.03] border border-white/[0.08] space-y-2">
      <div className="flex items-center gap-2">
        <Zap className="h-4 w-4 text-cyan-400" />
        <span className="text-xs font-mono font-bold text-cyan-200">AUTOMATIC PACKET ROTATION</span>
      </div>
      <p className="text-xs text-slate-300">
        Dispatched 480 encrypted frames across secondary orbital transponder.
      </p>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Alert Dispatch Console

Composite mission control card with live toast dispatch actions.

DISPATCH TELEMETRY BANNER

READY

Broadcast toast alerts across active operator workstations.

tsx
<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">DISPATCH TELEMETRY BANNER</CardTitle>
      <Badge variant="neon" size="sm">READY</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Broadcast toast alerts across active operator workstations.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <InteractiveToastDemos />
  </CardContent>
</Card>

API Reference

PROPERTIES (7)← swipe to inspect →
PropertyDescriptionTypeDefault
title
Bold title displayed at the top of the toast banner.
string
-
description
Secondary guidance or status explanation text.
string
-
variant
Visual urgency and laser countdown bar theme.
"info" | "success" | "warning" | "destructive"
"info"
duration
Lifespan in milliseconds before auto-dismissal kicks in.
number
4000
icon
Optional custom icon element to override semantic defaults.
React.ReactNode
-
position
For ToastProvider: Screen anchor corner.
"top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center"
"bottom-right"
maxToasts
For ToastProvider: Maximum concurrent visible banners.
number
5

Accessibility

  • ARIA Status Role: Each toast applies role="status" and aria-live="polite" to notify screen reader users without interrupting ongoing tasks.
  • Accessible Dismiss: The close button contains an explicit aria-label="Dismiss notification".

Best Practices

  • Toast Frequency: Do not spam toasts for mundane actions. Reserve toasts for asynchronous responses, save confirmations, or background errors.
  • Duration: Critical errors should use higher durations (e.g. duration={8000}) so users have sufficient time to read the instructions.