> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/button/customizing-flow-navigation-buttons.md).

# Customizing Flow Navigation Buttons

## Overview

Create a smooth, intuitive navigation experience for your Salesforce Flow users. In this tutorial, you'll use [Avonni Button](/flow/flow-components/button.md) components to build a custom navigation system. This gives you complete control over the look and feel of your flow's navigation, making your app easier to use.

{% hint style="info" %}

#### More ways to improve your screens

For more ways to improve your Screen Flow screens, see our [Salesforce Flow Screen Components guide (2026)](https://www.avonni.app/blog-posts/salesforce-flow-screen-components-guide-2026).
{% endhint %}

## Result

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-286a642b83f56898689e5e40022bc4c051bf94d4%2F2023-01-16_21-20-28.png?alt=media" alt=""><figcaption></figcaption></figure>

## Building the custom flow navigation button

### Create a New Flow

Type Flow in the setup menu

* Click on the "**New Flow**" button to create a new flow
* Select "**Screen Flow**"

{% @arcade/embed url="<https://app.arcade.software/share/qSuQYiG2FCYgKnf5UdOs>" flowId="qSuQYiG2FCYgKnf5UdOs" %}

### Create the Screen Flow

* Add the **Screen element**
* **Enter a screen label**
* Hide Header and Footer (optional)

{% @arcade/embed url="<https://app.arcade.software/share/1Imr9iGm6AbEoweOBItr>" flowId="1Imr9iGm6AbEoweOBItr" %}

### Add the Button Component

* Drag the [button component](/flow/flow-components/button.md) from the custom list (or type Button from the search box)

#### Set the following settings:

**Properties Panel Configuration**

* **`Label`**: Next
* **`Variant`**: Base
* **`Icon Name`**: utility:chevronright
* **`Icon Position`**: Right
* **`Type`**: button

{% @arcade/embed url="<https://app.arcade.software/share/qRoJp5ZplEDXHMuMyeor>" flowId="qRoJp5ZplEDXHMuMyeor" %}

**Interactions Panel Configuration**

* **`Add Click`**
* **`Type`**: Flow Navigation
* **`Type`**: choose the desired navigation type

**Style Panel Configuration**

* **Spacing**
  * **`Inline Start`**: 10px
  * **`Inline End`**: 10px
* **Text**
  * **`Line Height`**: 30px
  * **`Color`**: #9050e9
  * **`Color Hover`**: #7526e3
  * **`Color Active`**: #5a1ba9
* **Border**
  * **`Size`**: 1px
  * **`Radius`**: 20px
  * **`Color`**: #aeaeae


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/button/customizing-flow-navigation-buttons.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.