---
title: "Buttons in the Flow builder"
description: "Add and configure action buttons in the Flow Builder."
---

:::info
This section describes the new Flow Builder, which works with Adapty SDKs version 4.0 or higher.
:::

Buttons are the interactive elements in the Flow Builder that respond to user taps. Use them for:
- Purchase CTAs that connect to products and process transactions automatically
- Navigation — move users between screens (Next, Back, Close, Skip)
- Utility links — Restore Purchases, Terms of Service, and Privacy Policy

:::tip
Place purchase CTAs, restore links, and legal links inside a [Footer](builder-containers#footer) — it is pinned to the bottom of the screen and obscures the scrolling elements underneath.
:::

## Add buttons

To add any button:

1. Click **+** and select **Button**.
2. Select a button type.

    <img src="/assets/shared/img/button-type.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

3. Purchase buttons, links, and close buttons come with preconfigured actions. For links, [configure URLs to navigate users to](#links). For other button types, go to the **Interactions** panel. There, in the **Button triggers** section, set up [actions](onboarding-actions) that the button must perform.

    <img src="/assets/shared/img/button-action.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

4. Configure the [button design](builder-styling) in the **Design** panel.

## Button types

### Purchase buttons

:::link
For purchase buttons to work, bind products to screens and add the **Products** element. See the [guide](paywall-product-block).
:::

A purchase button starts the in-app purchase for whichever product the user has selected on the screen. The SDK processes the transaction automatically, so you don't need to handle purchases in the app code.

To add a purchase button:

1. Click **+** and select **Button**, then choose a button preset.
2. With the button selected, open the **Interactions** tab in the right panel.
3. Click **Add trigger** > **On tap**, then click **Add action**.
4. Set **Action** to **Purchase** and **Product** to `products.selectedProduct`. The `products.selectedProduct` variable always resolves to the currently selected product on the screen.

:::tip
You can attract more attention to purchase buttons by animating them. The Paywall builder currently supports the **Pulse** animation type.

Configure the animation style in the **Design** panel.
:::

  <img src="/assets/shared/img/purchase-button.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Links

:::important
The **Terms of Use** and **Privacy Policy** buttons have a built-in **Open URL** action. Set the destination URL there. Empty Open URLs and [inline links](onboarding-text#inline-link) block previewing and publishing.
:::

To comply with some store requirements, you can add links to:
- Terms of service
- Privacy policy
- Purchase restoration

To add links:
1. Click **+** and select **Button > Links**. This will add a row of inline buttons with pre-defined actions: restoring purchases or opening a URL. If you don't need all of the included buttons, delete the unnecessary ones in the layers panel.

    <img src="/assets/shared/img/add-links.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

2. Now, set up the button actions:

   - The **Restore purchases** button already handles purchase restorations.
   - For each remaining link:
        1. Click the button to select it and switch to the **Interactions** tab on the right.
        2. Paste the URL to the field.
        3. By default, the URL opens in an in-app browser for seamless user experience. If you want to navigate to users to an external browser, select the **Open in external browser** checkbox.

  <img src="/assets/shared/img/pb-links.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Close flow

The **Close** button closes the flow automatically.

To add a close button, click **+** and select **Button > Close flow**.

    <img src="/assets/shared/img/close-flow.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

:::tip
Use **Absolute** position to place your close button in the screen corner.
:::

You can also configure any other button to close the flow using [actions](onboarding-actions).

### Custom buttons

Any button you can add can be configured to perform any action on tap:
- Navigate to the next screen
- Show alert
- Set [variable](onboarding-variables)
- [Show or hide screen elements](onboarding-element-visibility)
- Open URLs
- Restore purchases
- Perform conditional actions