humanonlyweb/ui

Toast

Temporary notifications.

Markdown

Examples

useToast()

Place <UiToastViewport /> once near the app root.

Copy code

Action

action adds a button, e.g. Undo. Pressing it runs onClick and dismisses the toast.

In your inbox

Copy code

API

ToastViewport

PropTypeDefault
label

Accessible name of the live region. Defaults to the notifications translation.

string—
SlotProps
default

Renders each toast, replacing the message and close button.

{ toast: Toast; dismiss: () => void; }
close-icon

Replaces each close button's icon.

—

Types

export interface Toast {
  id: number;
  message: string;
  tone: ToastTone;
  /** Milliseconds before auto-dismiss; `0` keeps it until dismissed. */
  duration: number;
  /** A button in the toast, e.g. "Undo". Pressing it also dismisses the toast. */
  action?: ToastAction;
}

export type ToastTone = "success" | "danger" | "info";

export interface ToastAction {
  label: string;
  onClick: () => void;
}
Copy code

ToastItem

PropTypeDefault
toast*

The toast to render, from useToast().items.

Toast—
EventPayload
dismiss

Timed out or closed.

[id: number]
SlotProps
default

Replaces the message and close button.

{ toast: Toast; dismiss: () => void; }
close-icon

Replaces the close button's icon.

—

Types

export interface Toast {
  id: number;
  message: string;
  tone: ToastTone;
  /** Milliseconds before auto-dismiss; `0` keeps it until dismissed. */
  duration: number;
  /** A button in the toast, e.g. "Undo". Pressing it also dismisses the toast. */
  action?: ToastAction;
}

export type ToastTone = "success" | "danger" | "info";

export interface ToastAction {
  label: string;
  onClick: () => void;
}
Copy code

Styling

Parts
toast-viewporttoasttoast-messagetoast-actiontoast-close
States
data-toast-tone
Parts
toasttoast-messagetoast-actiontoast-close
States
data-toast-tone

Accessibility

  • Toasts are announced politely; errors are announced right away.
  • Timers pause on hover, focus and hidden tabs, then resume with the time left. duration: 0 keeps a toast until dismissed.
  • Shown above an open modal dialog, but the browser makes it inert there: it can't be clicked or announced until the dialog closes.