---
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
lang: en
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?

## 

- Adds a close button feature to alert boxes using the Message Box Widget from The Plus Addons for Elementor.
- Enables customization of the close button and icon through the Icon & Button settings in Elementor.
- Adjusts Closing Animation Durations to control the speed of the message box closure after clicking the close button.

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/)*