Custom flow navigation button

Overview

The button component can be used as a custom navigation flow allowing users to navigate between screens. In this tutorial example, we will show you how to use the button component to create a simple navigation process for your flow.

Using the button flow screen component can be very beneficial for creating a more user-friendly and efficient navigation system. For example, it allows you to fully customize the appearance and functionality of the navigation system, making it a better fit for the overall design of your app.

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