Toast

Base UICopy Anchor Link

Toast shows short-lived feedback after an action: save confirmations, undo windows, and messages that sit next to the control that triggered them. Mount Toast.Provider once with a manager from Toast.createToastManager(), keep a Toast.Portal and Toast.Viewport region in the tree, and map live toasts to Toast.Banner. Call toastManager.add({ title, description }) from the action that should announce; keep copy brief so screen readers hear a clear result.

Optional actions on a banner are Toast.Action only. The stack defaults to bottom-right; set position for another corner, or anchored with Toast.Positioner when the message should hug a trigger.

AnatomyCopy Anchor Link

Import the component and assemble its parts:

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

<Toast.Provider>
  <Toast.Portal>
    <Toast.Viewport>
      <Toast.Banner>
        <Toast.Action />
      </Toast.Banner>
    </Toast.Viewport>
  </Toast.Portal>
</Toast.Provider>

Manager helpers Toast.createToastManager() and Toast.useToastManager() wire the stack — not DOM parts. Anchored placement uses Toast.Positioner when the page teaches it.

When to useCopy Anchor Link

• Reversible or informational outcomes after an action (saved, deleted with undo, copied)
• Brief status that should not steal focus or block the rest of the page
• Feedback tied to a specific control via anchored placement

When not to useCopy Anchor Link

• Blocking validation that must be fixed before the task continues → field errors, or a Dialog when the interruption needs a titled sheet
• Focused tasks that need a form, confirmation, or nested drill-down → Dialog
• Rich anchored panels the user explores at leisure → Popover

RelatedCopy Anchor Link

• Dialog — modal edge sheets for tasks that interrupt the page
• Popover — non-modal anchored panels with richer content

Common examplesCopy Anchor Link

Stacked feedbackCopy Anchor Link

Mount the provider once, keep a portal region in the tree, and call add from any action under that provider. Multiple banners stack in the viewport; close() without an id clears the queue.

Pass position on Toast.Viewport when the stack should live in another corner (for example bottom-left).

Undo actionCopy Anchor Link

Banner children are limited to Toast.Action. Use the default Button chrome, or pass render when the action needs a different variant. Closing the toast from the action handler ends the undo window.

AnchoredCopy Anchor Link

For feedback tied to a specific control, set Toast.Viewport to position="anchored", wrap each banner in Toast.Positioner, and pass positionerProps.anchor (plus optional sideOffset and a short timeout) when calling add. Turn off dismissable when the toast should disappear on its own.

Ask your agentCopy Anchor Link

After this form saves successfully, show a short toast with title and description. Keep copy brief. Do not use toasts for validation errors that block the task.