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
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FMLbbg73AkeUOrkwDJGku%252F2023-01-16_21-20-28.png%3Falt%3Dmedia%26token%3D9014393b-4174-44c6-9e5a-27e5543275a5&width=768&dpr=4&quality=100&sign=4861688&sv=1)
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
: NextVariant
: BaseIcon Name
: utility:chevronrightIcon Position
: RightType
: button
Interactions Pane
Add Click
Type
: Flow NavigationType
: choose the desired navigation type
Style Pane
Spacing
Inline Start
: 10pxInline End
: 10px
Text
Line Height
: 30pxColor
: #9050e9Color Hover
: #7526e3Color Active
: #5a1ba9
Border
Size
: 1pxRadius
: 20pxColor
: #aeaeae
Last updated