In this Quick Tip, we're going to learn about the alert element.

The alert element is, as it sounds—you use it to temporarily alert the user to something that has changed or to give the user a warning.

What makes it special is that the behavior is done for you, so your only decision to make is how you style it and what you write in it.

You can get creative with alerts and make them inline, or you can do something straightforward and pin it to the top.

The only way to view an alert while designing is to turn on its visibility in the elements tree.

By nature, the alert element will always be hidden to the user until it's shown from an action in a workflow.

Here, we have a button click event, and if we navigate to Element Actions, we'll find a section for Alert.

The Show Message action lets you show the alert and customize its fade-in and out duration.

By default, this action will show the alert with the text from its property editor in the Design tab.

But with this action, we can change the text from the workflow—so we can reuse the alert as many times as we need for multiple different messages.

We'll preview our page and trigger the workflow to see our alert element in action.

Alerts help notify the user of changes that they've made or warn them of mistakes.

As you continue to build, it's an essential element to include in your app to help educate your users—and it all comes built in.

That's it for this Quick Tip! For more, be sure to check out bubble.io/academy.