# How to create alerts and warnings in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- A Bubble account with an app
- Basic understanding of Groups, visibility, and Custom States
- Familiarity with Bubble workflows

## Step-by-step guide

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
ALERTS AND WARNINGS — WORKFLOW SUMMARY
=======================================

TOAST NOTIFICATION:
  Floating Group (top-right) → toast Group
  Custom State: toast_message (text), toast_type (text)
  Visible when: toast_message is not empty
  Auto-dismiss: Pause 3s → clear toast_message
  Colors: green (success), red (error), yellow (warning)

MODAL WARNING:
  Popup element with icon, title, message, OK button
  Custom States: warning_title, warning_message
  Trigger: Set states → Show popup
  Dismiss: OK button → Hide popup

CONFIRMATION PROMPT:
  Popup: 'Are you sure?' + Cancel + Confirm buttons
  Custom State: item_to_delete (stores reference)
  Cancel: Hide popup
  Confirm: Delete item_to_delete → Hide popup

ANNOUNCEMENT BANNER:
  Data Type: Announcement (Message, Type, Active)
  Header Group: shows active announcement
  Dismiss: Add ID to User's Dismissed_Announcements
  Condition: Hide when ID in dismissed list

REUSABLE COMPONENT:
  Reusable Element: Alert
  Properties: message, type, auto_dismiss
  Conditional colors by type
  Auto-dismiss with 3s delay
```

## Common mistakes

- **Showing alerts without auto-dismiss** — Persistent success notifications clutter the interface and train users to ignore alerts. Fix: Auto-dismiss success notifications after 3 seconds. Keep error and warning modals until the user acknowledges them.
- **Not using a confirmation prompt for delete actions** — Accidental clicks on delete buttons permanently remove data with no undo option. Fix: Always show a confirmation dialog before any destructive action.
- **Hardcoding alert styling on each page instead of using a reusable element** — Inconsistent alert styles across pages confuse users and are hard to maintain. Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-alerts-and-warnings-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-alerts-and-warnings-in-bubble