Toast

Event‑driven notification receiver that renders animated floating toasts. Place it on any page to receive notifications triggered by button scripts (e.g., context.toast.success('msg')) or predefined showMessage actions. Position, duration, and styling can be configured.

Use Cases

• Success notifications after saving or submitting data
• Error messages when API calls or operations fail
• Warning alerts triggered by validation or business logic
• Info notifications for status updates from button scripts
• Custom notification styling (position, duration, icons) for any app

Properties

items

Demo notification items shown in the editor preview only. In preview/published mode, toasts are received dynamically via events from button scripts and predefined actions. Type: array. Default: none.

position

Screen corner where toasts appear. Type: string. Options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center. Default: top-right

duration

Auto‑dismiss delay in seconds. Set 0 to require manual dismissal. Type: number. Default: 5

showIcon

Show type‑specific icon (checkmark, X, warning triangle, info circle). Type: boolean. Default: true

customCss

Custom CSS styles. Type: string. Default: none

Best Practices

• Place one Toast component per page to enable notifications
• Use context.toast.success('msg') in button custom scripts to trigger notifications
• Use predefined showMessage action for simple notification triggers without custom code
• Set position to top-right (standard) or bottom-right for dashboard apps
• Keep duration at 5 seconds default – long enough to read, short enough not to annoy
• The items array is for editor preview only – keep 1‑2 examples or leave empty

Common Mistakes

Not placing a Toast component on the page

Why it's a problem: Without a Toast component, context.toast calls fall back to generic browser toasts instead of custom styled ones.

Fix: Add page.Toast({ position: 'top-right', duration: 5 }) to every page that uses toast notifications.

Using context.alert() for transient feedback instead of context.toast

Why it's a problem: alert() shows a modal dialog that blocks the user. Toast shows a non‑blocking notification that auto‑dismisses.

Fix: Use context.toast.success('Saved!') for transient feedback. Reserve context.alert() for critical messages requiring acknowledgment.