# How to Add a "Cancel and Close" Button

## Introduction

Screen flows in Salesforce are powerful tools for guiding users through a series of steps or processes. However, there are scenarios where users might need an easy way to exit the flow without completing it. This tutorial is designed to address such situations. We’ll guide you through integrating a 'Cancel and Close' button into your screen flows using the Avonni Button component. This addition will provide a straightforward option for users to opt out of the flow at any point, enhancing the user experience and flexibility of your screen flows.

## Step-by-Step Guide

### 1. Add the Avonni Button component to your flow dialog:

Begin by adding the Avonni Button component to your flow screen. This button will serve as the "Cancel and Close" option.

### 2. Configure the interaction on the button

To configure the button, navigate to the interaction settings and set the button's action to navigate to the next screen when clicked.

<figure><img src="/files/a3Me2tQyeSk780Ttai3x" alt=""><figcaption></figcaption></figure>

### 3. Add a decision element to your flow

Add a decision element to your flow to determine if the button was clicked. This element will help you identify if the user decided to cancel and close the flow dialog.

<figure><img src="/files/NzBMZhCFdLfDYQiEKo9Z" alt=""><figcaption></figcaption></figure>

### 4. Configure the decision element

In the decision element, set the criteria to check whether the button was clicked. The flow should proceed to the next step if the button is clicked.

<figure><img src="/files/47APXzlgY7PHgmQqnYWz" alt=""><figcaption></figcaption></figure>

### 5. Add a screen element without header and footer

Create a new screen element in your flow without a header and footer. This screen will be displayed when clicking the "Cancel and Close" button.

### 6. Add the Delay interaction component to the screen

In the new screen, add the [Avonni Delay interaction component](/flow/flow-components/delay-interaction.md). This component will finish the flow when clicking the "Cancel and Close" button.

<figure><img src="/files/18MyKh0iEyxDMmxFrKRR" alt=""><figcaption></figcaption></figure>

### 7. Configure the flow navigation interaction

In the Delay interaction component, configure the flow navigation interaction to finish the flow when the delay is completed.

<figure><img src="/files/WeBR2FI8oaTwEzNXdw4z" alt=""><figcaption></figcaption></figure>

### 8. And voila! Your "Cancel and Close" button is ready

With these steps completed, your flow now includes a functional "Cancel and Close" button, allowing users to exit the flow dialog when needed quickly.

## Conclusion

Following this tutorial, you successfully added a "Cancel and Close" button to your Salesforce screen flows using the Avonni Button component. This addition enhances the user experience and provides an intuitive way to exit the flow dialog when necessary.&#x20;

Remember to test your flow thoroughly to ensure the button works as expected, and feel free to explore other Avonni components to improve your Salesforce further flows.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/button/how-to-add-a-cancel-and-close-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.