Customizing Flow Navigation Buttons

Overview

Create a smooth, intuitive navigation experience for your Salesforce Flow users. In this tutorial, you'll use Avonni Button 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 even easier to use.

Result

Building the custom flow navigation button

Set up our flow

Create the flow

Type Flow in the setup menu

• Click on the "New Flow" button to create a new flow

• Select "Screen Flow"

Create the Screen Flow

General settings

Properties Pane configuration

Interaction Pane configuration

Style Pane configuration

General

• Add the Screen element

• Enter a screen label

• Hide Header and Footer (optional)

Add the Button Component

• Drag the button component from the custom list (or type Button from the search box)

Set the following settings:

Properties Pane

• Label: Next

• Variant: Base

• Icon Name: utility:chevronright

• Icon Position: Right

• Type: button

Interactions Pane

• Add Click

• Type: Flow Navigation

• Type: choose the desired navigation type

Style Pane

• 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