How to create alerts and warnings in Bubble

In Bubble, you create alerts and warnings by placing an Alert element on the page, customizing its style, and then showing or hiding it using workflows. Bubble alerts don’t appear automatically — you trigger them with actions like Show message in alert or by controlling visibility with custom states or conditions. This is the simplest and most reliable way to notify users about errors, success messages, or warnings.

Two Main Ways to Show Alerts

Bubble gives you two reliable patterns: using the built‑in Alert element or making your own Custom Alert Group for more design control.

• Built-in Alert element – quick, simple, automatically slides down from top.
• Custom alert group – a normal Group you design and show/hide with workflows.

Using the Built‑In Alert Element

This is the easiest method for beginners because it has one dedicated workflow action.

• Drag an Alert element onto the page.
• Set its Style (error, info, success) and default message.
• In a workflow, use the action Show message in alert.

// Example workflow action settings
Alert: My Alert
Message: "Please fill out all required fields."

Bubble will automatically display it and hide it after the timeout you set in the element's properties.

Creating a Custom Alert (More Flexible)

This is useful if you want modals, warning banners, or inline form errors.

• Create a Group and design it like a warning box.
• Uncheck This element is visible on page load.
• Create a custom state on the page like alert-visible (yes/no).
• Set the Group's Conditional tab: show when alert-visible is yes.
• In workflows: set the custom state to yes or no.

// To show the custom alert
Set state: Page alert-visible = yes

// To hide it
Set state: Page alert-visible = no

When to Use Which

• Use the built-in Alert for quick global messages: success, general errors, confirmations.
• Use custom groups when the message must appear near a form, inside a repeating group, or as a styled banner/modal.