Close (X) button building block

This article explains how to add, remove, and customize the close (X) button in guides. The close button gives visitors a clear way to exit a guide, helping you balance guidance with user control and avoid interrupting workflows.

For more information about all building blocks, see Guide building blocks overview.

Prerequisites

To edit guide components in the Visual Design Studio, you must have permission to create or edit guides.

About the close button

You can add or remove a close (X) button in both overlay and embedded guides. The close button is configured from the guide container settings and can be customized to match your guide’s design.

Add or remove the close button

Use the following steps to manage the close button:

1. Go to Guides.
2. Open the guide you want to edit.
3. Select Edit in my app to open the Visual Design Studio.
4. Select View steps, then choose the step you want to edit.

5. Hover over the step you'd like to edit and select Edit step.
6. In the Edit Container window, open the Styling tab.
7. Turn the close (X) button on or off. 
   
   

Customize the close button

You have the option to customize the appearance of a close button from within the guide step.

1. In the Visual Design Studio, hover over the close (X) icon and select the edit icon.
   
   
    
2. In the Edit Close Button Style dropdown, choose Custom.

You can edit the following properties:

• Color. The default color of the close button icon. Set using hexadecimal values, RGB values, the visual color selector, or the color slider.
• Hover color. The color of the icon when a visitor hovers over it.
• Padding. The space between the icon and its border. You can adjust the top, right, bottom, and left padding independently.
• Margin. The space between the close button and the edges of the guide step. You can adjust the top, right, bottom, and left margins independently.
• Alignment (horizontal). Whether the close button is aligned to the left or right of the guide step.

These settings allow you to align the close button with your guide layout and ensure it remains visible without distracting from the guide content.