Build a comprehensive alert system in Bubble with toast notifications, modal warning dialogs, confirmation prompts before destructive actions, and system-wide announcement banners. This tutorial covers creating each alert type using Groups, Custom States, and workflow triggers so your app communicates effectively with users at every critical moment.
Overview: Creating Alerts and Warnings in Bubble
Alerts inform users about success, errors, warnings, and important announcements. This tutorial builds four alert patterns: auto-dismissing toast notifications, modal warning dialogs, confirmation prompts, and announcement banners.
Prerequisites
- A Bubble account with an app
- Basic understanding of Groups, visibility, and Custom States
- Familiarity with Bubble workflows
Step-by-step guide
Build toast notifications
Build toast notifications
Create a Floating Group anchored to the top-right of the page. Inside it, add a Group called toast with a colored background (green for success, red for error). Add a Text element showing a Custom State called toast_message (text on the page). Add a close icon. Set the toast Group's visibility condition: visible when toast_message is not empty. In any workflow where you need a notification, set toast_message. To auto-dismiss, add a pause of 3 seconds then clear toast_message.
Expected result: Toast notifications appear in the corner and auto-dismiss after 3 seconds.
Create modal warning dialogs
Create modal warning dialogs
Add a Popup element to your page. Inside it, add: a warning icon, a Title text, a Message text, and an OK button. Create Custom States for warning_title and warning_message. The popup shows these values dynamically. To trigger: Set the states and use the Show popup action. The OK button hides the popup. Add conditional styling for different severity levels: yellow background for warnings, red for errors.
Expected result: Modal dialogs display warnings and errors that require user acknowledgment.
Add confirmation prompts for destructive actions
Add confirmation prompts for destructive actions
Before any delete or irreversible action, show a confirmation dialog. Create a Popup with the message Are you sure? and two buttons: Cancel (hides the popup) and Confirm (triggers the destructive action). Store the item to delete in a Custom State. When Confirm is clicked, delete the stored item and hide the popup. This prevents accidental data loss.
Pro tip: For critical actions like account deletion, require the user to type CONFIRM or their email address before enabling the Confirm button.
Expected result: Destructive actions require explicit confirmation before executing.
Display system-wide announcement banners
Display system-wide announcement banners
Create a Data Type called Announcement with fields: Message (text), Type (Option Set: Info/Warning/Maintenance), Active (yes/no), Created_Date (date). Add a Group at the top of your reusable header element. Set its data source to search for Announcements where Active = yes, sorted by date, first item. Display the message with conditional coloring by Type. Add a dismiss button that stores the announcement's ID in the user's Dismissed_Announcements list (a list of texts on the User type). Add a condition: hide when the announcement ID is in the user's dismissed list. For apps needing scheduled maintenance windows and multi-channel notifications, RapidDev can architect a complete notification system.
Expected result: System announcements display as dismissable banners across the app.
Create a reusable alert component
Create a reusable alert component
Build a Reusable Element called Alert that accepts properties: message (text), type (text — success/error/warning/info), and auto_dismiss (yes/no). Inside, add a Group with conditional background color based on type. Show an icon matching the type (checkmark for success, X for error, exclamation for warning). If auto_dismiss is yes, auto-hide after 3 seconds. Use this reusable element across all pages for consistent alert styling.
Expected result: A reusable alert component provides consistent notification styling across all pages.
Complete working example
1ALERTS AND WARNINGS — WORKFLOW SUMMARY2=======================================34TOAST NOTIFICATION:5 Floating Group (top-right) → toast Group6 Custom State: toast_message (text), toast_type (text)7 Visible when: toast_message is not empty8 Auto-dismiss: Pause 3s → clear toast_message9 Colors: green (success), red (error), yellow (warning)1011MODAL WARNING:12 Popup element with icon, title, message, OK button13 Custom States: warning_title, warning_message14 Trigger: Set states → Show popup15 Dismiss: OK button → Hide popup1617CONFIRMATION PROMPT:18 Popup: 'Are you sure?' + Cancel + Confirm buttons19 Custom State: item_to_delete (stores reference)20 Cancel: Hide popup21 Confirm: Delete item_to_delete → Hide popup2223ANNOUNCEMENT BANNER:24 Data Type: Announcement (Message, Type, Active)25 Header Group: shows active announcement26 Dismiss: Add ID to User's Dismissed_Announcements27 Condition: Hide when ID in dismissed list2829REUSABLE COMPONENT:30 Reusable Element: Alert31 Properties: message, type, auto_dismiss32 Conditional colors by type33 Auto-dismiss with 3s delayCommon mistakes when creating alerts and warnings in Bubble
Why it's a problem: Showing alerts without auto-dismiss
How to avoid: Auto-dismiss success notifications after 3 seconds. Keep error and warning modals until the user acknowledges them.
Why it's a problem: Not using a confirmation prompt for delete actions
How to avoid: Always show a confirmation dialog before any destructive action.
Why it's a problem: Hardcoding alert styling on each page instead of using a reusable element
How to avoid: Build a reusable Alert element and use it consistently across all pages.
Best practices
- Auto-dismiss success notifications after 3 seconds
- Require confirmation for all destructive actions
- Use consistent color coding: green=success, red=error, yellow=warning, blue=info
- Build alerts as reusable elements for consistency across pages
- Allow users to dismiss announcement banners and remember their choice
- Show specific error messages instead of generic Something went wrong
- Place toast notifications in a consistent location (top-right) across the app
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a notification system to my Bubble.io app with toast messages, warning modals, delete confirmations, and announcement banners. Help me design the implementation for each type.
Create a reusable toast notification component that shows success (green) and error (red) messages. The toast should appear in the top-right corner and auto-dismiss after 3 seconds.
Frequently asked questions
How do I show different alert types with one component?
Use a Custom State for alert type (success/error/warning). Add conditions that change background color and icon based on the type value.
Can I stack multiple toast notifications?
Yes. Use a list Custom State for messages and display them in a Repeating Group inside the Floating Group. Remove each after 3 seconds.
How do I make the confirmation dialog reusable?
Build it as a Reusable Element with properties for the message text and a custom event for the confirm action. Each page passes its specific delete logic through the event.
Can I add sound to alerts?
Yes. Use an HTML element with JavaScript to play a short audio file when the alert appears.
How do I persist announcement dismissals across sessions?
Store dismissed announcement IDs in a list field on the User Data Type. This persists across page reloads and sessions.
Can RapidDev help build advanced notification systems?
Yes. RapidDev can build multi-channel notification systems with push notifications, email alerts, in-app messaging, and notification preferences.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation