Toast

A toast is a brief, non-intrusive notification that appears in a corner of the window—typically used to provide quick feedback or status updates (e.g., “Changes saved” or “Error occurred”). Toasts automatically disappear after a short duration and do not block user interaction.

Basic Toast

Shows the default toast.

Preview Code
javascript

Success toast

Shows a toast with a success message

Preview Code
javascript

API

The toast function provides a simple interface for displaying information.
Toast Object Properties
The toast object passed to the boui.toast function can have the following properties:

Common alternative names: Snack Bar, Notification Toast, Inline Notification

Types: Success Toast, Warning Toast, Error Toast, Info Toast

Principles

Clarity

Toasts display concise, easily scannable messages that communicate system status or feedback without interrupting the user's workflow.

Non-Intrusive

Toasts appear temporarily in a corner of the screen (typically bottom-right or top-right), allowing users to stay focused without needing to interact with them.

Consistency

Toasts maintain consistent appearance, behavior, and placement across the application to ensure predictable user experience.

Usage

Use toast notifications for:

  • Displaying brief success confirmations
  • Informing users of non-critical issues
  • Showing system feedback without requiring interaction
  • Notifying users of background process results (e.g., upload completed)
  • Providing status updates or contextual messages
  • Alerting about transient errors that don’t block the workflow