Toast

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { Button, ToastProvider, useToast } from '@krackedui/motion';

function ToastButtons() {
  const { toast, dismiss } = useToast();
  const [last, setLast] = useState<string | number | null>(null);
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button variant="secondary" onClick={() => setLast(toast({ message: 'Link copied' }))}>Neutral</Button>
      <Button variant="secondary" onClick={() => setLast(toast({ message: 'Changes saved', tone: 'success' }))}>Success</Button>
      <Button variant="secondary" onClick={() => setLast(toast({ message: 'Couldn’t save changes', description: 'Check your connection and try again.', tone: 'danger' }))}>Danger</Button>
      <Button
        variant="secondary"
        onClick={() => setLast(toast({ message: 'Moved to Trash', action: { label: 'Undo', onClick: () => toast({ message: 'Restored', tone: 'success' }) } }))}
      >
        With action
      </Button>
      <Button variant="ghost" disabled={last === null} onClick={() => { if (last !== null) dismiss(last); }}>Dismiss last</Button>
    </div>
  );
}

// ToastProvider goes once near the root of your app.
export function ToastDemo() {
  return (
    <ToastProvider>
      <ToastButtons />
    </ToastProvider>
  );
}

Examples

Static pills

ToastPill is the look without timers or live region, for previews.

Toast options

toast(options) returns the toast id (string | number). Options:

• message: ReactNode (required): the main line.
• description?: ReactNode: a second, smaller line.
• tone?: "neutral" (default), "success" (green check icon) or "danger" (red error icon, announced assertively).
• action?: { label, onClick }, one action button; clicking it runs onClick and dismisses the toast.
• duration?: number: ms before it hides. Default 4000; 6000 with an action or for danger; 0 keeps it until dismissed (a close button is shown).
• icon?: IconName, id?: string | number (Motion extras): custom leading icon; your own id to replace or dismiss a known toast.

API Reference

ToastProvider

Hosts the toasts and the live region. Put it once near the root.

useToast()

Returns { toast, dismiss }. Throws a message naming <ToastProvider> when used outside it.

ToastPill

Static toast pill.

Accessibility

• Each toast is read out by a live region: neutral and success politely (role="status"), danger assertively (role="alert").
• Timers pause while the pointer is over a toast or focus is inside the toast region, and while the window is in the background.
• F8 moves focus to the toast region ("Notifications"); Tab reaches the action and close buttons; Escape dismisses the focused toast.
• Swipe down to dismiss on touch screens.
• Give important actions enough time: toasts with an action stay at least 6 seconds; never put the only way to do something in a toast.
• Slides up and fades in, fades out; with reduced motion it only fades.

Usage

• Use to confirm an action that just happened ("Link copied", "Moved to Trash · Undo").
• Use tone="danger" for failures the user should know about right away; keep the message short and say what to do.
• Don't use toasts for information the user must act on or read later: use Alert or a Dialog.
• Show one toast per action; don't stack several for the same event.