Show Toast

Overview

Toast notifications are a standard and user-friendly way to communicate short status updates without significantly interrupting the user's workflow. They are essential for confirming actions, alerting users to potential issues, or providing informational cues.

Key Features

• Provides Feedback: Informs users about the result of an action (success, error, warning, info).

• Temporary: Designed for brief messages that don't require permanent display.

• Configurable Appearance: Control the style (color/icon) based on the message type.

• Configurable Behavior: Control how long the toast stays visible and if the user can dismiss it.

• Triggered by Interactions: Launched as an action following a user interaction (like a button click) or another event (like a Flow finishing).

When to Use Toasts

Use the Show Toast interaction to provide feedback for these types of responses:

• Success (success variant): Confirm a successful action (e.g., "Record saved successfully," "Settings updated").

• Error (error variant): Indicate an issue that prevented an action from completing (e.g., "Save failed: Missing required fields," "Could not connect to server").

• Warning (warning variant): This option alerts users to potential problems or provides cautions (e.g., "Approaching data limit," "Duplicate record detected," etc.).

• Info (info variant): Inform users about an ongoing process or provide neutral information (e.g., "Processing your request...", "Report generation started").

How to Configure the Show Toast Interaction

You don't add the Show Toast interaction directly to the canvas. Instead, you configure it as an action part of another component's interaction.

Steps

1

Select the Trigger Component

Choose the component (like a Button, Data Table row action, etc.) that will initiate the toast message when a user interacts with it

2

Access the Interactions Panel

Select the component you chose in Step 1. In the Properties Panel on the right side of the builder, find and open the 'Interactions' section

3

Choose the Triggering Event

Within the Interactions section, decide which event should cause the toast to appear. Common events include 'On Click' (for buttons) or 'On Finish' / 'On Error' (which can run after other actions like saving data or executing a Flow)

4

Add the 'Show Toast' Action

Click the' Add Action' button for the specific event you selected in Step 3. From the list of available action types, choose 'Show Toast.

5

Configure the Toast Details

Set the specific properties for your toast notification:

• Title: (Text) Enter the main heading for the toast message. This appears in bold. You can type static text (e.g., "Success!") or click the resource selector icon to use a dynamic value from a variable (e.g., {!StatusTitleVariable}).

• Message: (Text) Enter the detailed body text for the notification. Keep this brief. You can type static text (e.g., "Your changes have been saved.") or click the resource selector icon to use a dynamic value (e.g., {!FeedbackMessageVariable}).

• Variant: (Select) Choose the style and purpose, which controls the color and icon:

  • info: (Blue) For informational messages.

  • success: (Green) For confirming successful actions.

  • warning: (Yellow/Orange) For potential issues or cautions.

  • error: (Red) For indicating problems or failed actions.

• Mode: (Select) Choose how the toast is dismissed:

  • dismissible (Default): Hides automatically after about 5 seconds; users can close it sooner. Best for success/info.

  • pester: Hides automatically after about 5 seconds; users cannot close it early. Use for important warnings.

  • sticky: Stays visible until the user manually closes it. Use for critical errors requiring acknowledgment