Skip to content

Toast

Confirmation without interruption. Toasts report outcomes — broadcast, settled, failed — and never ask questions. Five tones, one stack; loading toasts refuse dismissal until the work resolves, and everything else can be flung away.

All tones — full stack, pinned open

The real component rendered statically inline (placement=static, duration 0 — no timers, no portal). Neutral, info, loading, success, error. The loading toast is non-dismissible, so it has no close affordance.

neutral · info · loading · success · error

  1. Watch-only wallet added

    Main Vault (xpub…9wPd) is now tracked without keys.

  2. Fee estimate updated

    Standard is now 6 sat/vB (~30 minutes).

  3. Broadcasting transaction

    Relaying through Tor — a few seconds.

  4. Transaction broadcast

    0.245 000 00 BTC to bc1q…8p3w · 924 sats fee.

  5. Broadcast failed

    Fee below relay minimum. Nothing left your wallet.

import { AnimatedToastStack, useAnimatedToastStack } from "@coldharbor/ui";

const { toasts, showToast, dismissToast } = useAnimatedToastStack();

showToast({
  status: "success",
  title: "Transaction broadcast",
  description: "0.245 000 00 BTC to bc1q…8p3w · 924 sats fee.",
});

<AnimatedToastStack toasts={toasts} onDismiss={dismissToast} position="bottom-right" fixed />
  • --ch-surface
  • --ch-border
  • --ch-fg
  • --ch-fg-muted
  • --ch-primary
  • --ch-success
  • --ch-danger

Variants

An action slot for follow-ups, a persistent loading toast that cannot be dismissed, and placement=absolute anchoring the stack inside a panel instead of the viewport.

With action

  1. Swap complete

    0.08 BTC → 28.301 XMR settled to your primary account.

Persistent (dismissible=false)

  1. Restoring wallet

    Scanning 84,120 blocks for silent-payment outputs.

Anchored — placement=absolute, bottom-right

  1. Address copied

showToast({
  status: "success",
  title: "Swap complete",
  action: { label: "View swap", onClick: openSwapDetail },
});

showToast({ status: "loading", title: "Restoring wallet", dismissible: false, duration: 0 });
  • --ch-surface
  • --ch-border
  • --ch-fg
  • --ch-fg-muted
  • --ch-primary
  • --ch-success
  • --ch-danger

Live stack

Spawn real toasts: entrance spring, 4.2s auto-dismiss, at most four visible, drag sideways to fling one away. Every third broadcast fails, so both outcome tones appear.

Spawner (live)
    const { toasts, showToast, dismissToast } = useAnimatedToastStack({ limit: 4 });
    • --ch-surface
    • --ch-border
    • --ch-fg
    • --ch-fg-muted
    • --ch-primary
    • --ch-success
    • --ch-danger

    Themes

    The success toast under all three layers.

    1. Transaction broadcast

      0.245 000 00 BTC to bc1q…8p3w.

    • --ch-surface
    • --ch-border
    • --ch-fg
    • --ch-fg-muted
    • --ch-primary
    • --ch-success
    • --ch-danger