---
title: "How to Add Close Button in Alert Box/Message Box Elementor?"
url: https://theplusaddons.com/docs/add-close-button-in-alert-box-message-box-elementor/
date: 2024-03-14
modified: 2026-04-11
author: "Aditya Sharma"
description: "These message boxes are often missing a key feature - a close button. This can be frustrating for users who want to dismiss the box without taking any action. With..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Message-Box-Elementor_-1024x536.jpg
word_count: 304
---

# How to Add Close Button in Alert Box/Message Box Elementor?

## Key Takeaways

- Message Box Widget from The Plus Addons for Elementor allows users to add a close button to alert boxes.
- Users can adjust the Closing Animation Durations between 500ms and 2500ms for the message box.
- The Close Button toggle must be enabled to display the closing button in the message box.

These message boxes are often missing a key feature - a close button. This can be frustrating for users who want to dismiss the box without taking any action.

With the Message Box Widget from The Plus Addons for Elementor, you can add a close button to alert boxes or message boxes using Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Message Box widget, [click here.](https://theplusaddons.com/docs//message-box-settings-overview/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-message-box/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Message Box widget to the page and follow the steps - 

1. From the **Title**, you can add a title for the alert box.

2. From the **Description** toggle, you can add a description to the alert box.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-MessageBox-Add-Close-Icon-Button.gif)

**Icon & Button** -  From here, you can add an Icon and a closing button for the message box.

Enable the **Main Icon** toggle to put an icon in the message box. Then choose **Select Icon** to pick your icon image from files you have or upload a new one.

3. You have to enable the **Close Button** toggle to have the closing button appear for the message box.

Use the **Select Icon** option to add an image from the media library or upload a new image.

4. Adjust the **Closing Animation Durations** to set the timing for the message box to close once the close button is clicked, and you can control how fast the icon closes.

**For example,** setting it to 500ms means it will close quickly, while 2500ms will make it close more slowly.

Now you will have a close button to your alert box/message box.

![close button message box demo](https://theplusaddons.com/wp-content/uploads/2024/03/close-button-message-box-demo.gif)

***Suggested Read:** [How to Add Description in Elementor Message Box Using an Elementor Template](https://theplusaddons.com/docs//add-description-in-elementor-message-box-using-elementor-template/)*

## Frequently Asked Questions

**Q: What should I do if the close button is not appearing in my message box?**
A: If the close button isn't showing, ensure that you have enabled the Close Button toggle in the Message Box settings. This toggle must be activated for the button to appear. Additionally, check that you have selected an icon for the close button using the Select Icon option. If these settings are correct and the button still doesn't show, try refreshing the page or checking for plugin conflicts.

**Q: How do I add a description to my alert box in Elementor?**
A: To add a description to your alert box, use the Description toggle in the Message Box settings. This allows you to provide additional context or information alongside the title. For more detailed instructions, you can refer to the guide on [adding descriptions in Elementor message boxes](https://theplusaddons.com/docs//add-description-in-elementor-message-box-using-elementor-template/).

**Q: Does the Message Box widget work with other page builders besides Elementor?**
A: The Message Box widget from The Plus Addons for Elementor is designed exclusively for use with Elementor. It does not work with other page builders like Gutenberg, Beaver Builder, or Divi. If you're using Elementor, you can take full advantage of the widget's features, including the close button functionality.

**Q: What are the best practices for using the close button in message boxes?**
A: When using the close button in message boxes, it's best to ensure that it is clearly visible and easily accessible to users. Consider the timing of the closing animation; a duration of around 500ms is often ideal for a quick dismissal without feeling abrupt. Additionally, using a recognizable icon for the close button can enhance usability and ensure users understand its function.