Skip to content
nexubDesign System
v2.4.0

Components · Feedback

Toast

Stablev0.0.1 → v1.7.0

Imperative toast notifications using the toast object. Render <Toaster /> once in your layout.

import { Toast } from '@nexub/react';

Usage

Use it for

  • Confirming a non-blocking action (file saved, message sent)

  • Reporting a background event the user should know about

  • Providing brief feedback that disappears automatically

  • Offering an undo action immediately after a destructive operation

Use something else for

  • Critical errors that block the user — use Alert or AlertDialog

  • Information the user must read and acknowledge — use Dialog

  • Persistent status that should remain visible — use Banner or Alert

  • Long messages with multiple lines of text

Examples

Default

Variants

With action

Undoable delete

Hide the item right away; delete it for real only when the toast closes without Undo.

Props

Props
PropTypeDefaultDescription
Toaster expandbooleanfalseAlways show toasts as a list. By default they collapse into a stack that fans out on hover or focus, which also pauses their timers.
Toaster visibleToastsnumber3How many toasts show at once. Older ones are hidden visually but stay in the live region.
toast.success(title, opts?)requiredstring—Show a success toast with an optional options object.
toast.error(title, opts?)requiredstring—Show an error toast.
toast.warning(title, opts?)requiredstring—Show a warning toast.
toast.info(title, opts?)requiredstring—Show an info toast.
toast.custom(title, opts?)requiredstring—Show a default/custom toast.
toast.undoable(title, opts)requiredUndoableToastOptions—A toast with an Undo action (beta, 1.7.0). Undo calls opts.onUndo; any other close (timer, swipe, close button, toast.dismiss) calls opts.onCommit, exactly once. Returns the toast id.
undoable opts{ onUndo; onCommit?; undoLabel?; description?; duration? }—undoLabel defaults to the undo message ("Undo"). Commit the change in onCommit, not before showing the toast.
opts.descriptionstring—Secondary supporting text below the title.
opts.durationnumber5000Time in ms before auto-dismiss. Use Infinity to persist.
opts.action{ label: string; onClick: () => void }—Renders an action button inside the toast.