---
title: "Understand Action Buttons in Flows"
slug: "action-buttons-in-flows"
updated: 2025-11-20T04:04:30Z
published: 2025-11-20T04:04:30Z
canonical: "support.whatfix.com/action-buttons-in-flows"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Understand Action Buttons in Flows

Whatfix enables you to add Action Buttons in Flows. Action Buttons enable users to click a Flow and proceed ahead, without clicking any UI element on the base application. Add Action Buttons in Flow Steps and configure them to trigger a new flow, trigger a branch, jump to any other step in the same flow, move to the next step(s), or open external URLs. It also supports decision tree scenarios. The feature is available for both Free-floating and Attached to element step types in Flows. For more information, see [Create a Flow](/studio/docs/creating-a-flow-1) and [Free-floating steps in Flows](/studio/docs/free-floating-flows).

> [!WARNING]
> Note:
> 
> Action Buttons for Flows is currently in Beta. To enable the feature, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20action%20buttons%20in%20Flows&body=Hi%20%0A%0AKindly%20enable%20action%20buttons%20in%20Flows%20for%20my%20ENT%20%0A%0A%0A).

**Configure the Action Buttons**

1. Log in to the application where you want to create content, and then launch the **Whatfix Studio**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png)
2. Click **Flow**. ![Click Flows ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_Flows.png)
3. Enter the name of the Flow. ![Editor_flow_name6](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Editor_flow_name%286%29.png)
4. Click **Add Step**. ![Studio_Click_Add_Step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Add_Step.png)
5. In the Studio toolbar, select a capture mode. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-D9HF0KC1.png)

          Note:

          

- Free-floating Flows is currently Beta. Contact [support@whatfix.com](http://mailto:support@whatfix.com?subject=Enable%20Free-floating%20Flow%20step%20&body=Hi%0A%0AI%20would%20like%20to%20explore%20the%20new%20Free-floating%20Flow%20step%20type.%20Kindly%20enable%20it%20on%20my%20ENT%0A%0AThanks) for more information.
- For more information on different capture modes, see [Quick Capture Modes](https://support.whatfix.com/docs/what-are-quick-capture-flows#quick-capture-modes).

1. Click the desired elements on the page that the user needs to select.  

![Create_Flow_Leads_Click](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Create_Flow_Leads_Click.png)

1. Click the **+** icon on the tooltip to add buttons. ![Add buttons in Flow steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2025-10-07_22-32-39.png)
2. Under **Label**, add a Button name and then click the **Save** icon.

![Name the action button](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_Labelname.png)

> [!NOTE]
> Info:
> 
> - Select **Bold**, **Italic**, and/or **Underline** to customize the Button **Label**.
> - Add up to five buttons in a Flow step.
> - The character limit for Button **Label** is up to 50 characters.
3. On **Action**, click the **Select action** dropdown.![Click the dropdown to select the action for the buttons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_Selectaction.png)
4. Select the **Action** based on your requirements.

![Select action for Flow buttons.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_SelectAction.png)

#### **Here’s a detailed breakdown of each action on the buttons in Flow steps:**

| Select action | Description | Example use case |
| --- | --- | --- |
| **Next Step** | Directs you to the next step in the Flow through the button. For more information, see [What is Next Step in Action Buttons and On click of next button in Step Completion Rule?](/studio/docs/when-to-use-next-in-action-buttons-and-in-step-completion-rule) | After reviewing company policies in an onboarding Flow, the user clicks “Continue” to move directly to the next step, where they set up their email and internal tools. |
| **Jump to another step** | Launches you to any other step in the same Flow. | While troubleshooting an issue, the user finds their problem is already resolved and clicks “Skip to Feedback” to jump past the remaining steps and submit their experience. |
| **Go to a branch** (Conditional branching in Action Buttons is in Beta. Contact [support@whatfix.com](mailto:support@whatfix.com ?subject=Enable%20conditional%20branching%20in%20action%20buttons&body=Hi%20team%2C%20%0A%0APlease%20enable%20conditional%20branching%20in%20action%20buttons%20for%20Flows%2C%20for%20my%20ENT.%20) to enable the feature.) | Helps you create user-led conditional workflows. | The user is asked what kind of help they need. Based on their selection, clicking “Billing Support” or “Technical Help” takes them to a specific branch of the Flow tailored to that issue. |
| **Attach URL** | Directs you to an external link. | During a product tour, the user clicks “Learn More” to open a help center article URL in a new tab for more guidance on the feature. |
| **Attach another flow** | Helps you navigate between two Flows. | At the end of a basic setup Flow, the user clicks “Start Advanced Setup” to seamlessly launch another Flow that’s linked to walk them through more complex configuration steps. |

**Customize the Action Buttons**

1. Select the Button **Type**: either **Filled**, **Outlined**, or **Custom**.

![Select the Button type after adding action buttons to steps in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_Buttontype.gif)
2. Click **Padding** to choose the **Button width**, **Vertical** and/or **Horizontal Padding**, and/or **Corner Radius**. ![Add padding to the action buttons in Flow steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_Buttons_Padding.png)

Padding applies to all the three Button Types: **Filled**, **Outlined**, and **Custom**.

The following table shows the padding options that are available:

| Padding | Description | UI appearance |
| --- | --- | --- |
| **Button width** | Defines how wide the button appears, affecting its overall size and prominence. Use either the **Fit Content** or **Fill Space** options to adjust the Button width. | ![Select the button width in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2025-10-07_23-15-04.gif) |
| **Vertical Padding (px)** | Adds space to the left and right inside the button, increasing content spacing. | ![Vertical alignment of buttons in action buttons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_Padding_Vertical.gif) |
| **Horizontal Padding (px)** | Adds space above and below the button's content, adjusting its width. | ![Adjust the horizontal padding of the buttons in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_HorizontalPadding.gif) |
| **Corner Radius (px)** | Controls how rounded the button’s corners are, influencing its visual style. | ![Adjust the corner radius of buttons in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_CornerRadius.gif) |

> [!WARNING]
> Note:
> 
> When you add more than one button to a Flow step, you have the option to select the **Arrangement**, **Alignment**, and **Gap** of the buttons in each step, using the following steps:
> 
> 
> 
> 1. Click the space between the buttons.
> 
> 
> 
> ![Click the gap between the buttons to choose the gap](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_Gap.gif)
> 
> a. On **Arrangement**, click either **Vertical** or **Horizontal** to choose the placement of the buttons.
> 
> ![Select the arrangement of buttons in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_SelectArrangement.gif)
> 
> 
> 
> 
> 
> b. On **Alignment**, click either **Left**, **Center**, or **Right** to adjust the button positions. The option works only for buttons that have the Button Width set as **Fill Space**.
> 
> ![Select the alignment of buttons in Flow steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_SelectAlignment.gif)
> 
> 
> 
> 
> 
> c. On **Gap**, decrease or increase the spacing between buttons.
> 
> ![Decrease or increase the spacing between the buttons in Flow steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_SelectGap.gif)
> 
> 
> 
> 
> 
> **How to use Custom styling to create buttons based on your brand design guidelines?**
> 
> a. Click **Styling**.![Use custom styling for buttons in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_Buttons_CustomStyling.png)
> 
> The **Styling** option is available only for Custom buttons, and not for Filled or Outlined buttons. To change the style of the Filled and Outlined buttons, you must use CSS customization of tooltips for Flows. For more information see, [Can I customize the Filled or Outlined buttons in Flows?](/studio/docs/can-i-customize-filled-and-outlined-buttons-in-flows)
> 
> 
> 
> b. Under **Button**, choose the **Color**, and/or **Hover color** of the button.![Adjust the Button color of custom buttons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_customstyling_Buttons.png)
> 
> 
> 
> c. Under **Button label**, choose the **Color**, and/or **Hover color** of the button text.![Adjust the Button label of custom buttons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_customstyling_Buttonlabel.png)
> 
> 
> 
> d. Under **Border**, choose a **Color** for the button’s border.
> 
> ![Adjust the Border of custom buttons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_customstyling_Border.png)
> 
> 
> 
> e. Use **Move left** and/or **Move right** to shift the button positions, when there are two or more buttons in the Flow step.
> 
> ![Move the buttons left or right using custom styling in action buttons](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_ActionButtons_customstyle_move.gif)

1. Click **Save Step.**

![Save step after creating action buttons in Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_SaveStep.png)

1. Click **Save Flow**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Save_Flow_Studio.png)

> [!WARNING]
> Note:
> 
> - Delete the buttons that you do not require any longer, by clicking the Delete icon. ![Delete buttons for Flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_Buttons_delete.png)
> - Once you finish creating the Flow on Studio, you can view it on the Dashboard and edit it further if required. For more information see [Edit Action Buttons in Flows](/studio/docs/edit-action-buttons-in-flows).
> - Preview the Flow with Action Buttons before publishing it. For more information, see Preview a Flow and [Push all Whatfix content and widgets to Production](/studio/docs/pushing-whatfix-content-to-production). To display the Flow in Self Help or Task list, add it to the widgets, configure the [Visibility Rules](/studio/docs/understand-advanced-visibility-rules-for-content) for the Self Help or Task list, and then use Preview mode to view the Flows before publishing them.

## Related

- [Flows Best Practices](/flows-best-practices.md)