Instructions
1. Installing the element
Add the Prime Toast Mobile element to your app — it's recommended to place it once inside a page-level reusable element (e.g. your Header or a global reusable), so it stays available on every page.
Give it fixed dimensions (e.g. 100% width, minimal fixed height like 1px) — as with any plugin element on Bubble mobile, responsive sizing collapses to zero on the native engine.
2. Triggering a notification
The action is called Notify. It accepts the following fields:
Field Type Required Default Description
message text Yes — Text shown inside the toast
type text No success One of: success, error, loading, blank
duration number (ms) No 4000 Time on screen before auto-dismissing
position text No top One of: top, bottom, center
show_icon yes/no No yes Shows or hides the type icon
custom_icon text (emoji) No — Overrides the default icon for this call only
Example workflows:
Success — When "Save" button is clicked → Action Prime Toast Mobile's Notify → message: "Changes saved successfully!" → type: success
Loading — When "Submit" button is clicked → Action Prime Toast Mobile's Notify → message: "Processing your request..." → type: loading
Error — When API call returns an error → Action Prime Toast Mobile's Notify → message: "Something went wrong. Please try again." → type: error
3. Available notification types
Type Default icon Suggested use
success 👍 Confirmations, completed actions
error ❌ Failures, validation issues, API errors
loading ⏳ Ongoing processes
blank ℹ️ Neutral notices, general information
4. Visual customization (element properties)
Each type has its own background color, text color, border color and icon, configurable independently:
success_bg, success_txt, success_border, success_icon
error_bg, error_txt, error_border, error_icon
loading_bg, loading_txt, loading_border, loading_icon
blank_bg, blank_txt, blank_border, blank_icon
General layout and style:
alignment: left, center (default) or right — horizontal alignment of the toast
animation: fade, slide or fade-slide (default) — entry/exit animation style
animation_duration: animation duration in ms (default 250)
toast_width: toast width as % of screen (default 90, min 10, max 100)
horizontal_margin / vertical_margin: spacing from screen edges (default 16 / 24)
padding_horizontal / padding_vertical: internal toast spacing (default 16 / 12)
border_size / border_radius: border thickness and roundness (default 1 / 12)
font_size: message font size (default 15)
icon_size / icon_spacing: icon size and spacing from text (default 18 / 8)
5. Technical notes
On the native app (BubbleGo, Android/iOS), the toast renders inside a real Modal, floating above the entire interface.
On the editor's web preview, the toast uses fixed positioning relative to the screen (equivalent to native behavior), with extra automatic top/bottom margin so it doesn't overlap the status bar or gesture area — this adjustment is preview-specific and doesn't affect the published app's behavior.
Only one notification is shown at a time; triggering a new one before the previous dismisses replaces the currently displayed message.