# Inquiries: Button component

> Add a Button component to an Inquiry screen, choose from five types (Action, Cancel, Complete, Link, Submit), and set its transition and logic.

Source: https://help.withpersona.com/articles/768ADrRjWEBHLaUY7S3JPZ/
Section: Inquiries > Features > Screen Components

## What is the Inquiry Button component?

**Button** is an Inquiry screen component that provides an interactive element. When users click it, it triggers an action. You can customize its appearance, function, and define logic that governs when it appears.

![buttoncomponent_screenshot](https://assets.withpersona.com/f_auto,q_auto/help-center/articles/inquiries/buttoncomponent-7b9261.png '1198x417')

A **Button** guides users through key actions such as submitting forms, opening pages, or canceling operations. It is essential for enabling user interactions and directing workflows.

## How do you add an Inquiry Button Component?

1.  Navigate to the Dashboard, and click on **Inquiries > Templates**.
2.  Find and click on the Inquiry template you want to edit, or **Create** a new template.
3.  Hover over a screen and click the **Pencil** icon, or double-click the screen to open it in the Screen Editing View.

    ![component-edit](https://assets.withpersona.com/f_auto,q_auto/help-center/articles/inquiries/component-edit.png '740x298')

4.  In the Left Panel, search the Component Library for ‘**Button**\`.
5.  Drag and drop the Button component into your screen, and reposition it by dragging it around.
6.  Click on the Button component to open its settings in the Right Panel. The panel has two tabs: **Design** and **Logic**.
    1.  On the **Design** tab, under **Properties:**
        1.  **Style**: Choose the button style, primary or secondary. The appearance of each style is defined in the **Theme** section of the Left Panel, and can be overridden for this Button on the **Design** tab.
        2.  **Text**: Set the text displayed on the button.
        3.  **Button type:** Define what happens when users click the button. Choose from: Action, Cancel, Complete, Link, or Submit. See **Button types** below.
        4.  **Transition**: Select screen or action sequence to transition to when this button is clicked. The transition target cannot be changed after the template has been saved.
    2.  On the **Design** tab, use the **Layout**, **Typography**, and **Appearance** sections to style the component. See the Design tab section on the [Screen Step components in Inquiries](https://help.withpersona.com/articles/6bdXdAJjp5OE93u7L6AgNT/) page for details.
    3.  On the **Logic** tab, add rules that govern when the component appears, and when it does not. See the Logic tab section on the [Screen Step components in Inquiries](https://help.withpersona.com/articles/6bdXdAJjp5OE93u7L6AgNT/) page for details.
7.  Use the actions at the top right of the panel to copy, delete, or set translations on the component. To translate the text, see [Editing translations for your Inquiry](https://help.withpersona.com/articles/1vMFCXQxDsdpZ2YI4eguFd/).
8.  **Close** the step. You’ll have to **Save** and **Publish** the template to begin using it.

## Button types

There are five Button types: Action, Cancel, Complete, Link, and Submit. Each has a different set of settings and use.

1.  **Action type:** Triggers a specific task or interaction. You must set a **Transition** that defines what happens when the button is clicked, either **Screen** and **Action Sequence**.
    1.  **Screen** transition: Changes to a different screen when the button is clicked. Select the transition screen from the dropdown. You will see a list of available screens from your Inquiry.
    2.  **Action Sequence** transition: Uses an action sequence to determine the next screen. Select the sequence from the dropdown. You must set an **Error screen** to choose where users are routed if the sequence fails. Select the error screen from the dropdown.
2.  **Cancel type:** When the user clicks this button, the flow ends immediately without completing the path.
3.  **Complete type:** When the user clicks this button, the flow ends and the current path is completed.
4.  **Link type:** Opens a URL when the user clicks the button, without submitting form values or advancing the Inquiry.
5.  **Submit type:** Triggers a specific task or interaction. You must set a **Transition** that defines what happens when the button is clicked, either **Screen** and **Action Sequence**.
    1.  **Screen** transition: Changes to a different screen when the button is clicked. Select the transition screen from the dropdown. You will see a list of available screens from your Inquiry.
    2.  **Action Sequence** transition: Uses an action sequence to determine the next screen. Select the sequence from the dropdown. You must set an **Error screen** to choose where users are routed if the sequence fails. Select the error screen from the dropdown.

## Plans Explained

### Button component by plan

|                  | Startup Program | Essential Plan | Growth Plan | Enterprise Plan |
| ---------------- | --------------- | -------------- | ----------- | --------------- |
| Button component | Available       | Available      | Available   | Available       |

[Learn more about pricing and plans](https://withpersona.com/pricing?utm_source=product&utm_medium=referral&utm_audience=a&utm_campaign=cm_gen_ds_hc-plan-table).