How can I customize the Flow Footer Button to say Submit rather than Next

Question

I have a flow that acts as a case submission and rather than it saying "Next" in the flow footer, I want a green button to say "Submit".

How can I modify the next button? If code is required, what is the best route for accomplishing a "Submit" button?

Answer 1

UPDATE: it's now possible to do this declaratively in your flow -- see new answer from Kris Goncalves.

The only way to do this currently is to use a code solution. You can override the footer by hiding the standard flow footer and adding a custom component to the bottom of your flow screen.

Here's an example from the documentation (link below):

<aura:component access="global" implements="lightning:availableForFlowScreens">
        
   <!-- Determine which actions are available -->
   <aura:attribute name="canPause" type="Boolean" />
   <aura:attribute name="canBack" type="Boolean" />
   <aura:attribute name="canNext" type="Boolean" />
   <aura:attribute name="canFinish" type="Boolean" />
   <aura:handler name="init" value="{!this}" action="{!c.init}" />
        
   <div aura:id="actionButtonBar" class="slds-clearfix slds-p-top_medium">
      <!-- If Previous is available, display to the left -->
      <div class="slds-float_left">
         <aura:if isTrue="{!v.canBack}">
            <lightning:button aura:id="BACK" label="Previous"
               variant="neutral" onclick="{!c.onButtonPressed}" />
         </aura:if>
      </div>
      <div class="slds-float_right">
         <!-- If Pause, Next, or Finish are available, display to the right -->
         <aura:if isTrue="{!v.canPause}">
            <lightning:button aura:id="PAUSE" label="Pause"
               variant="neutral" onclick="{!c.onButtonPressed}" />
         </aura:if>
         <aura:if isTrue="{!v.canNext}">
            <lightning:button aura:id="NEXT" label="Next" 
               variant="brand" onclick="{!c.onButtonPressed}" />
         </aura:if>
         <aura:if isTrue="{!v.canFinish}">
            <lightning:button aura:id="FINISH" label="Submit"
               variant="brand" onclick="{!c.onButtonPressed}" />
         </aura:if>
      </div>
   </div>
</aura:component>

One limitation of this is that it won't automatically fix the buttons to the foot of the screen in quick actions, since flow doesn't understand that your component is a footer and not just a generic screen component.

See:

• Customize the Flow Footer with an Aura Component
• Build a Custom Navigation Model for Your Flow Screens

Answer 2

With Spring 22, Translate and Customize Button Labels in the Flow Screen Footer was made Generally Available (GA)

Customize the Previous, Pause, Next, and Finish button label text in Flow Builder. You can also provide button label text for other languages. With customized screen navigation options, you can let a user know what to expect when the user clicks the button. Previously, to customize these footer labels, you built a custom component.

You can now, within Configure Footer, simply select Use a custom label to input whatever text you'd like to display for the buttons in the footer. This means you can avoid using a custom component as the other answer shows.