🔔 Beautiful Mobile Toast Notification
This plugin brings a unique type of notification to your Bubble native app: a card that springs in from the top, sits there for a moment on a soft shadow, and slides away on its own. Minimal, quiet, and finished down to the last point of padding.

Drop the element on your page once, then select the position, style and colors. That’s it!

═══════════════════════════════

CHECK IT

Live demo: https://plugins-testing-46093.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=toast%20notification

Editor:https://bubble.io/page?id=plugins-testing-46093&test_plugin=1788065146834x474155516374548500_current&tab=Design&name=toast+notification&type=page&elements=bTIcw

═══════════════════════════════

🎨 COLOUR THE WAY YOU WANT IT

🫧 Two shapes. Banner for anything with a title and a subtitle. Pill — a compact capsule, only as wide as its text — for "Copied", "Saved", "Sent". You choose one for the app and every toast follows it, the way a design system should.

🖐️ Five presets. Neutral, success, error, warning and info, each with its own icon and its own beautiful color. Pick one per toast, straight from the workflow.

💜 Or your own. Any hex you like. Set your brand colour and the icon, the accent and the tint all follow it.

🪄 Three levels of colour. Subtle keeps the colour in the icon and leaves the card clean. Tinted lays a veil of it over the whole card. Solid fills the background, and the text colour is worked out by contrast — a pale yellow gets dark text, a deep red gets white, with nothing to configure.

✍️ And the last word is yours. If a colour of your own still doesn't sit right with the text, set the text colour explicitly — the title, the message and the icon all follow it. The optional progress line takes a colour of its own too.

═══════════════════════════════

👆 IT BEHAVES THE WAY PEOPLE EXPECT

🫳 Swipe to dismiss, toward whichever edge the toast came from, with rubber-banding when you drag the other way.

👉 Tap to dismiss — or catch the tap as an event and open a page with it. A state tells you which toast was tapped.

🗂️ They stack. Newest nearest the edge, up to a limit you set. Past that limit the oldest leaves on its own, so a burst of workflows can never bury the screen.

⏱️ They time themselves. Duration in seconds, per toast. Set it to 0 and the toast stays until you dismiss it — the pattern for "You're offline" or "Saving…".

═══════════════════════════════

🎛️ WHAT YOU CAN SET

Position (top or bottom) · shape · theme · fill · corner radius · font size · your own font family · distance from each edge · side margin · how many stack at once · swipe and tap gestures · an optional progress line and its colour · optional vibration · an optional frosted-glass background on iOS.

⚙️ Actions: Show Toast · Dismiss
📤 States: is_visible · visible_count · last_message · last_title · tapped_message · tapped_title
📣 Events: toast_shown · toast_tapped · toast_dismissed

═══════════════════════════════

🛠️ BUILT FOR REAL PROJECTS

🎯 One field is usually all you fill in. Every property on the action is optional and falls back to the element's own setting, so a workflow that raises a toast needs a message and nothing else.

🖼️ Icons drawn, not shipped. Seven vector icons — check, cross, warning, info, bell, star and dot — drawn at the size they are shown, so they stay crisp on every screen. Or leave a toast without one, or use any emoji of your own.

🩺 A debug overlay for when things go sideways. Flip one checkbox and the element shows which action reached it, which fields arrived and what colour it was told to use.