Toast

Open in Playground

Drive it with `useTimedToast`; render <Toast toasts={toasts} onClose={hideToast} /> once. Several toasts stack (newest at the bottom); beyond max (default 5) the oldest is dropped. Types: success, danger (or error), warning, info. Pass actions: [{ label, onClick }] for buttons (use duration: 0 so it stays until the user acts), link for a link, and onClose for a dismiss button. position places the stack in any of nine spots, from top-left to bottom-right. The live region is always mounted so screen readers announce changes.

Props

Toast

  • toastsToastItem[]

    Toasts to stack, from useTimedToast. type is "success" (default), "danger" (or "error"), "warning" or "info"; actions is { label, onClick }[]. See the ToastItem table below.

  • toast{ msg, type?, ... } | null

    A single toast, when you do not need a stack.

  • position'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
    Default: 'bottom-right'

    Where the toasts appear on the screen.

  • onClose(id) => void

    Adds a dismiss button to each toast, and dismisses it after an action is used (pass hideToast).

ToastItem

  • idnumber

    Unique id of the toast.

  • msgReactNode

    Message.

  • type'success' | 'danger' | 'error' | 'warning' | 'info'
    Default: 'success'

    Color and icon of the toast.

  • link{ href, label }

    A link shown in the toast.

  • actions{ label, onClick }[]

    Buttons shown in the toast.

  • iconReactNode

    Replaces the default icon.

Related hooks and theme:useTimedToast