---
title: "Button Component"
slug: "button-component"
updated: 2025-12-04T19:16:26Z
published: 2025-12-04T19:16:26Z
canonical: "docs.unqork.io/button-component"
---

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

# Button Component

UDesignerClassic Designer

The **Button component** adds an interactive, clickable element to your [module](/v1/docs/introduction-to-the-module-builder). Buttons allow end-users to perform actions and make choices with a single button-click. As a creator - LC, you can use Buttons to set custom actions or process flows based on your end-user's choices.

You'll find the component under the [Secondary Fields](/v1/docs/secondary-fields) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Field** | Displays or hides the Button from view. Setting the Hide Button toggle to ON hides the Button in Express View. Setting the toggle back to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)** unhides the Button. The component will always remain visible in the Module Builder. By default, the Hide Button toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |

[![A static image displaying the Button component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(5).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(5).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

### Formatting

| Setting | Description |
| --- | --- |
| **Button Style** | Sets the visual appearance of the button. Options include: `Primary`, `Secondary`, `Success`, `Danger`, `Warning`, `Info`, `Light`, `Dark`, and `Link`. The Button Style only affects the Button component's appearance and does not effect its function. |
| **Button Width** | Options for determining the width of the button: ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(3).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **Fixed**: The Button component's width adjusts based on the length of its Label Text. ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(3).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **Block**: The Button component's width is the full width of the page or column, with the Label Text centered. |
| **Restrict to Single Click** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)**, the Button becomes disabled after one click. This feature helps end-users avoid triggering the Button's action more than once (or button-mashing). If you need to re-enable a disabled button, you can do so using a logic component. To re-enable, set up a logic component, like an Initializer, to send a **disabled** value of no to your Button component. This can be helpful if the action your Button triggers fails. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Restrict to Single Click option applies to every button-click, whether you create a submission or not. By default, the Restrict to Single Click toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |

### Input Behavior

| Setting | Description |
| --- | --- |
| Input Behavior | Controls how end-users interact with the component. Choose from the following options: - **Enable User Input**: Allow end-users to view and enter data in this field. - **Disable User Input**: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a **prohibited** symbol. - **Read Only - Legacy**: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None. |

## Actions Settings

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_thumb_0_0(10).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

| Setting | Description |
| --- | --- |
| **Element Type** | This setting provides the following options: - **Module**: Used for adding interactive buttons to a module. - **Workflow**: Used for adding custom navigation buttons to a module that's part of a workflow. Buttons added here replace the workflow's default navigation buttons. > [!NOTE] > Custom navigation buttons only display on the module they're added to. If your workflow has several Screen/Task nodes, you need to add custom navigation buttons to each module linked to a Screen/Task node. Or, you can add custom navigation buttons to select pages of your workflow. > [!TIP] > When adding custom navigation Buttons to a workflow, disable the default navigation buttons. This avoids displaying two sets of navigation buttons. Set the Hide Express Navigation Buttons toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)** for the Screen/Task node linked to your module. |
| **Action Type** | The Action Type setting varies based on the chosen Element Type. See the Action Type Triggers (Module) or Action Type Triggers (Workflow) tables for additional information and available triggers. |

### Triggers

After selecting an Element Type, the Triggers section displays setting specific options for Module or Workflow applications. Use the trigger settings to execute other components, modules, applications, or workflows.

#### Action Type Triggers (Module)

Action Type Triggers for module include **Save**, **Save Draft**, **Event**, **Validate**, and **Reset**. Each Module Action Type contains a unique set of trigger options.

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="strong"><div data-type="table-content"><table width="1038" class="editor360-table fit-width" borderstyle="solid" cellspacing="0" style="max-width:1038px;width:1038px;"><colgroup><col style="width:519px;"><col style="width:519px;"></colgroup><tbody><tr><th colspan="1" rowspan="1" colwidth="519"><p>Setting</p></th><th colspan="1" rowspan="1" colwidth="519"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1" colwidth="519"><p><span type="spanMark"><strong>Save</strong></span><strong> </strong></p></td><td colspan="1" rowspan="1" colwidth="519"><p>Saves, validates, and creates a submission to the database. Triggers include:</p><ul><li style="--pseudoBefore--fontWeight:bold"><p><strong>Before Save</strong>: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out before the submission saves.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>After Save</strong>: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out after the submission saves.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>Before Validation</strong>: Enter the Property ID of the component that you want to trigger on Button-click, but before the validation of the submission.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>For Valid Form</strong>: Enter the Property ID of the component that you want to trigger after successful validation.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>For Invalid Form</strong>: Enter the Property ID of the component that you want to trigger after validation errors.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>On Click</strong>: Enter the Property ID of the component that you want to trigger on each button-click.</p></li></ul></td></tr><tr><td colspan="1" rowspan="1" colwidth="519"><p><span type="spanMark"><strong>Save Draft</strong></span><strong> </strong></p></td><td colspan="1" rowspan="1" colwidth="519"><p>Saves and creates a submission to the database but doesn't validate the page's information. Triggers include: </p><ul><li style="--pseudoBefore--fontWeight:bold"><p><strong>Before Save</strong>: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out before the submission saves.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>After Save</strong>: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out after the submission saves.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>On Click</strong>: Enter the Property ID of the component that you want to trigger on each button-click.</p></li></ul></td></tr><tr><td colspan="1" rowspan="1" colwidth="519"><p><span type="spanMark"><strong>Event</strong></span><strong> </strong></p></td><td colspan="1" rowspan="1" colwidth="519"><p>Trigger an event by specifying a Property ID in a Trigger field. Or, lets you create an Event ID to reference in another component to trigger that component on button-click. Triggers include:</p><ul><li style="--pseudoBefore--fontWeight:bold"><p><strong>On Click</strong>: Enter the Property ID of the component that you want to trigger on each button-click.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>Click Event</strong>: Enter an Event ID to assign the Button's designated event. You can then reference this Event ID in other components.</p></li></ul></td></tr><tr><td colspan="1" rowspan="1" colwidth="519"><p><span type="spanMark"><strong>Validate</strong></span><strong> </strong></p></td><td colspan="1" rowspan="1" colwidth="519"><p>Validates the information on the page but doesn't create a submission. Triggers include:</p><ul><li style="--pseudoBefore--fontWeight:bold"><p><strong>Before Validation</strong>: Enter the Property ID of the component that you want to trigger on Button-click, but before the validation of the submission.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>For Valid Form</strong>: Enter the Property ID of the component that you want to trigger after successful validation.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>For Invalid Form</strong>: Enter the Property ID of the component that you want to trigger after validation errors.</p></li><li style="--pseudoBefore--fontWeight:bold"><p><strong>On Click</strong>: Enter the Property ID of the component that you want to trigger on each button-click.</p></li></ul></td></tr><tr><td colspan="1" rowspan="1" colwidth="519"><p><span type="spanMark"><strong>Reset</strong></span><strong> </strong></p></td><td colspan="1" rowspan="1" colwidth="519"><p>Clears data and resets the Disabled, Hidden, and Required settings for all components in the <span type="spanMark">module</span>. This setting is similar to using the <strong>Reset</strong> and <strong>Clear</strong> Output Types together in a logic component. Triggers include: </p><ul><li style="--pseudoBefore--fontWeight:bold"><p><strong>On Click</strong>: Enter the Property ID of the component that you want to trigger on each button-click.</p></li></ul><blockquote style="background:#fdf2ce;border-left:4px solid #7f6416;overflow:auto;" class="warningBox" data-background="#fdf2ce" data-border="#7f6416"><p><span type="spanMark">The Reset type does not reset validations.</span></p></blockquote></td></tr></tbody></table></div></editor360-custom-block>

#### Action Type Triggers (Workflow)

Action Types for workflows include **Next**, **Previous**, and **Go To**. Each Workflow Action Type contains a unique set of trigger options.

[![A static image displaying the Button component's Workflow Action settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

| Setting | Description |
| --- | --- |
| Next | Takes the end-user to the next step in your workflow. Triggers include: - **Before Save**: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out before the submission saves. - **After Save**: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out after the submission saves. - **Before Validation**: Enter the Property ID of the component that you want to trigger on Button-click, but before the validation of the submission. - **On Click**: Enter the Property ID of the component that you want to trigger on each button-click. |
| Previous | Takes the end-user to the previous step in your workflow. Triggers include: - **Before Save**: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out before the submission saves. - **After Save**: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out after the submission saves. - **On Click**: Enter the Property ID of the component that you want to trigger on each button-click. |
| Go to | Takes the end-user to the step specified in the **Step Path*** field. Enter the Path of the workflow step where you want your button to lead. When your end-user clicks this button, they'll go to that step. Triggers include: - **Before Save**: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out before the submission saves. - **After Save**: Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out after the submission saves. - **On Click**: Enter the Property ID of the component that you want to trigger on each button-click. *You must assign a **Step Path** to use the **Go To** Action Type. |

### User Feedback

| Setting | Description |
| --- | --- |
| **Hide Success Message** | Displays or hides a success message on successful submission, validation, or saving of a draft. Setting the Hide Success Message toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)** hides the success message. By default, the Hide Success Message toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |
| **Success Message** | Enter a custom success message to display on successful submission, validation, or saving of a draft. |
| **Click Event** | Displays when selecting the Event Action Type under the **Module** Element Type. Enter an Event ID to assign the Button's designated event. You can then reference this Event ID in other components. |

### Error Message

| Setting | Description |
| --- | --- |
| **Hide Error Message** | Displays or hides an error message on successful submission, validation, or saving of a draft. Setting the Hide Error Message toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)** hides the error message. By default, the Hide Error Message toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |
| **Error Title** | Enter a title for the error message to display when there are validation issues. |
| **Error Message** | Enter a custom error message to display when there are validation issues. |

## Advanced Settings

### Additional Display Options

[![A static image displaying the UDesigner Button component's Additional setting options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0(4).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(4).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

| Setting | Description |
| --- | --- |
| **Display Dialog on Click** | Displays or hides a confirmation dialog on button-click. The confirmation dialog also allows end-users to confirm their intention to complete the Button's associated action. Setting the toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)** shows the confirmation dialog. By default, the Display Dialog on Click toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |
| **Dialog Heading** | Enter a title for the confirmation dialog to display on button-click. |
| **Dialog Message** | Enter a custom message for the confirmation dialog to display on button-click. |
| **Button Label for Dismiss** | Enter a Label for the Button to dismiss the dialog message. Actions associated with the button-click will not continue. |
| **Button Label for Confirm** | Enter a Label for the Button to confirm understanding of the dialog message. Actions associated with the button-click will continue. |
| **Prevent Disabling on Submission** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)**, the Button won't disable even if your end-user submits their application using the Enter/Return key. If your end-user presses the Enter/Return key by accident. it could prevent a successful submission. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Prevent Disabling on Submission setting only applies when your end-user creates a submission. By default, the Prevent Disabling on Submission toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |
| **Disable on Invalid Forms** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)**, end-users are prevented from clicking the button when the form is invalid. When end-users meet all validation requirements, the button becomes clickable. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Disable on Invalid Forms setting only applies when your end-user hasn't met the validation requirements set up in your module. By default, the Disable on Invalid Forms toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Styling** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
| **Left/Right Icon** | Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button. > The full list of supported GLYPHICONS® glyph codes is available here: [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/). |

## Accessibility Settings

### ARIA

[![A static image displaying the UDesigner Button component's Accessibiltiy setting options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accessibility_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accessibility.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

| Setting | Description |
| --- | --- |
| **Aria** | Use these settings to create ARIA (Accessible Rich Internet Applications) attributes to better support end-users that require screen readers to navigate your applications. |
| **Aria Label** | Use this field to define the component when when a screen reader arrives at it in Express View. |

## Adding a Button Component

As an example, let's create a simple information intake module with a Save-action button. We'll customize the appearance of the Button component by adding an icon to it. We'll also set a custom confirmation dialog.

### Configure the Columns Component

The **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component helps organize your module.

1. Drag and drop a **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component onto your canvas.
2. In the Property ID field, enter **columns**.
3. Under **Formatting**, click the icon displaying ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/two_column_frame.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) (two) evenly-spaced columns.
4. Click **Save Component**.

### Configure the Text Field Components

Start the configuration with two Text Field components to capture the end-user's first and last names. By placing the Text Field components in the Columns component, the fields will appear next to each other.

1. Drag and drop two **T****ext Field** components onto your canvas. Place one component in each column of your **columns** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component.
2. In the Property ID and Label Text fields, enter the following:

| Property ID | Label Text |
| --- | --- |
| **firstName** | First Name |
| **lastName** | Last Name |
3. Click **Save Component** for each component as you complete it.

### Configure the Email Component

Next, an **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Email** component collects the end-user's email address.

1. Drag and drop an **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Email** component onto your canvas, placing it in the first column of the **columns** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component, below the **firstName** **T****ext Field** component.
2. In the Property ID field, enter **emailAddress**.
3. In the Label Text field, enter `Email Address`.
4. Click **Save Component**.

### Configure the Phone Number Component

<editor360-custom-block data-preprocessing="true" data-sanitizationtags="strong"><p>Use a dedicated <strong> </strong><span type="spanMark"><strong>P</strong></span><strong>hone Number</strong> component to collect the end-user's phone number.</p></editor360-custom-block>

1. Drag and drop a **P****hone Number** component onto your canvas, placing it in the first column of the **columns** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component, below the **emailAddress** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Email** component.
2. In the Property ID field, enter **phoneNumber**.
3. In the Label Text field, enter `Phone Number`.
4. Click **Save Component**.

### Configure the Button Component

The **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(12).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Button** component saves and creates a submission with the information on the page. After you customize your button's appearance, ask the end-user for permission to contact them.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(12).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Button** component onto your canvas, placing it in the first column of the **columns** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component, below the **phoneNumber** **P****hone Number** component.
2. In the Property ID field, enter **btnSave**.
3. In the Label Text field, enter `Save`.
4. Navigate to the **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(12).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Button** component's **Advanced** settings.
5. Under **Additional Display Options**, set the Display Dialog on Click toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)**.
6. In the field, enter `Please read and confirm`.
7. In the field, enter `I agree to share my information with Farmers Insurance Group. I give permission to Farmers Insurance Group to contact me.`.
8. In the field, enter `No, cancel`.
9. In the field, enter `OK, continue`.

[![A static image displayign the Button component's Additional Display Options settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/btnSave1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/btnSave1.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)
10. Under **Additional Styling**, in the field, enter `glyphicon glyphicon-ok-sign`. This adds a checkmark icon to your button.

[![A static image displaying the Button component's Right Icon settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/btnSave2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/btnSave2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)
11. Click **Save Component**.
12. **Save** your module.

**Preview** your module in Express View. You'll see the following functionality:

[An animated image displaying an Express form containing a button component. The submission is saved, revealing a dialogue window. The User acknowledges the dialogue window and a response is given.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Button_Comp_ExampleExpress.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

The **Button component** adds an interactive, clickable element to your [module](/v1/docs/introduction-to-the-module-builder). Buttons allow end-users to perform actions and make choices with a single button-click. As a , you can use Buttons to set custom actions or process flows based on your end-user's choices.

Some ways you might use the Button component include:

- Saving, submitting, validating, or resetting a module.
- Triggering another component, such as an [Initializer](/v1/docs/initializer-component), [Decisions](/v1/docs/decisions-component), or [Data Workflow](/v1/docs/data-workflow-component) component.
- Navigating between [Panels](/v1/docs/panel-component).
- Downloading a Managed Asset, such as a PDF or CSV file.
- Labeling the Button-click event by giving it an Event ID. After setup, you can then reference that Event ID in different components, allowing you to create more complex logic-based configurations. For example, triggering several different components with a single button-click Event ID.
- Using the Workflow Element Type, adding custom navigation buttons to a workflow.

You'll find the component under the [Secondary Fields](/v1/docs/secondary-fields) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button_v3_Gif.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

## What You'll Learn

After completing this article, you’ll know when to use a Button component, how to configure its settings, and how to use it in an Unqork application.

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image dispaying the Button component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button_v3_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button%20v3%2002.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Disable User Input** | Stops the end-user from using the button. Your end-user sees the display as grayed out and the button as unclickable. By default, the Disable Button toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |
| **Hide Field** | Displays or hides the Button from view. Setting the Hide Button toggle to ON hides the Button in Express View. Setting the toggle back to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)** unhides the Button. The component will always remain visible in the Module Builder. By default, the Hide Button toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |

### Formatting

| Setting | Description |
| --- | --- |
| **Button Style** | Sets the visual appearance of the button. Options include: `Primary`, `Secondary`, `Success`, `Danger`, `Warning`, `Info`, `Light`, `Dark`, and `Link`. The Button Style only affects the Button component's appearance and does not effect its function. |
| **Button Width** | Options for determining the width of the button: ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(3).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **Fixed**: The Button component's width adjusts based on the length of its Label Text. ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(3).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **Block**: The Button component's width is the full width of the page or column, with the Label Text centered. |
| **Restrict to Single Click** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)**, the Button becomes disabled after one click. This feature helps end-users avoid triggering the Button's action more than once (or button-mashing). If you need to re-enable a disabled button, you can do so using a logic component. To re-enable, set up a logic component, like an Initializer, to send a **disabled** value of no to your Button component. This can be helpful if the action your Button triggers fails. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Restrict to Single Click option applies to every button-click, whether you create a submission or not. By default, the Restrict to Single Click toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |

## Actions Panel

[![A static image dispaying the Button component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button_v3_03_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button%20v3%2003.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

### Element Type

A choice chip displaying the following options:

#### **Module**

Used for adding interactive buttons to a module.

#### **Workflow**

Used for adding custom navigation buttons to a module that's part of a workflow. Buttons added here replace the workflow's default navigation buttons.

> [!NOTE]
> Custom navigation buttons only display on the module they're added to. If your workflow has several Screen/Task nodes, you need to add custom navigation buttons to each module linked to a Screen/Task node. Or, you can add custom navigation buttons to select pages of your workflow.

> [!TIP]
> When adding custom navigation Buttons to a workflow, disable the default navigation buttons. This avoids displaying two sets of navigation buttons. Set the Hide Express Navigation Buttons toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)** for the Screen/Task node linked to your module.

### Action Type

The Action Type choice chip varies based on the selected Element Type.

For the **Module** Element Type, the choice chip displays the following button-click actions:

| Actions | Description |
| --- | --- |
| **Save** | Saves, validates, and creates a submission to the database. |
| **Save Draft** | Saves and creates a submission to the database but doesn't validate the page's information. |
| **Event** | Trigger an event by specifying a Property ID in a Trigger field. Or, lets you create an Event ID to reference in another component to trigger that component on button-click. |
| **Validate** | Validates the information on the page but doesn't create a submission. |
| **Reset** | Clears data and resets the Disabled, Hidden, and Required settings for all components in the module. This setting is similar to using the **Reset** and **Clear** Output Types together in a logic component. > [!WARNING] > The Reset type does not reset validations. |

For the **Workflow** Element Type, the choice chip displays the following button-click actions:

| Actions | Description |
| --- | --- |
| **Next** | Takes your end-user to the next step in your workflow. |
| **Previous** | Takes your end-user to the previous step in your workflow. |
| **Go to** | Takes your end-user to the specified step in your workflow. You'll enter the appropriate step in the Step Path field. |

### Workflow

| Setting | Description |
| --- | --- |
| **Step Path** | Displays when selecting the Go to Action Type, under the Workflow Element Type. Enter the Path of the workflow step where you want your button to lead. When your end-user clicks this button, they'll go to that step. |

### Triggers

| Setting | Description |
| --- | --- |
| **Before Save** | Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out before the submission saves. |
| **After Save** | Enter the Property ID of the component that you want to trigger on button-click. This trigger plays out after the submission saves. |
| **Before Validation** | Enter the Property ID of the component that you want to trigger on Button-click, but before the validation of the submission. |
| **For Valid Form** | Enter the Property ID of the component that you want to trigger after successful validation. |
| **For Invalid Form** | Enter the Property ID of the component that you want to trigger after validation errors. |
| **On Click** | Enter the Property ID of the component that you want to trigger on each button-click. |

### User Feedback

| Setting | Description |
| --- | --- |
| **Hide Success Message** | Displays or hides a success message on successful submission, validation, or saving of a draft. Setting the Hide Success Message toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)** hides the success message. By default, the Hide Success Message toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |
| **Success Message** | Enter a custom success message to display on successful submission, validation, or saving of a draft. |
| **Click Event** | Displays when selecting the Event Action Type under the **Module** Element Type. Enter an Event ID to assign the Button's designated event. You can then reference this Event ID in other components. |

#### Error Message

| Setting | Description |
| --- | --- |
| **Hide Error Message** | Displays or hides an error message on successful submission, validation, or saving of a draft. Setting the Hide Error Message toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)** hides the error message. By default, the Hide Error Message toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF**). |
| **Error Title** | Enter a title for the error message to display when there are validation issues. |
| **Error Message** | Enter a custom error message to display when there are validation issues. |

## Advanced Panel

[![A static image dispaying the Button component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button_v3_04_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button%20v3%2004.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

### Additional Display Options

| Setting | Description |
| --- | --- |
| **Display Dialog on Click** | Displays or hides a confirmation dialog on button-click. The confirmation dialog also allows end-users to confirm their intention to complete the Button's associated action. Setting the toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)** shows the confirmation dialog. By default, the Display Dialog on Click toggle is set to **(OFF)**. |
| **Dialog Heading** | Enter a title for the confirmation dialog to display on button-click. |
| **Dialog Message** | Enter a custom message for the confirmation dialog to display on button-click. |
| **Button Label for Dismiss** | Enter a Label for the Button to dismiss the dialog message. Actions associated with the button-click will not continue. |
| **Button Label for Confirm** | Enter a Label for the Button to confirm understanding of the dialog message. Actions associated with the button-click will continue. |
| **Prevent Disabling on Submission** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)**, the Button won't disable even if your end-user submits their application using the Enter/Return key. If your end-user presses the Enter/Return key by accident. it could prevent a successful submission. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Prevent Disabling on Submission setting only applies when your end-user creates a submission. By default, the Prevent Disabling on Submission toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |
| **Disable on Invalid Forms** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)**, end-users are prevented from clicking the button when the form is invalid. When end-users meet all validation requirements, the button becomes clickable. Restrict to Single Click, Prevent Disabling on Submission, and Disable on Invalid Forms are all guardrails. The Disable on Invalid Forms setting only applies when your end-user hasn't met the validation requirements set up in your module. By default, the Disable on Invalid Forms toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(OFF)**. |

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Styling** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
| **Left/Right Icon** | Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button. > The full list of supported GLYPHICONS® glyph codes is available here: [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/). |

## Accessibility Panel

[![A static image displaying the Button component's accessibility settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/classic_accessibility_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/classic%20accessibility.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

### ARIA

| Setting | Description |
| --- | --- |
| **Aria** | Use these settings to create ARIA (Accessible Rich Internet Applications) attributes to better support end-users that require screen readers to navigate your applications. |
| **Aria Label** | Use this field to define the component when when a screen reader arrives at it in Express View. |

## Adding a Button Component

As an example, let's create a simple information intake module with a Save-action button. We'll customize the appearance of the Button component by adding an icon to it. We'll also set a custom confirmation dialog.

### What You Need

For this configuration, you'll need the following components:

- 1 [Columns](/v1/docs/columns-component) component
- 2 [Text Field](/v1/docs/text-field-component) components
- 1 [Email](/v1/docs/email-component) component
- 1 [Phone Number](/v1/docs/phone-number-component) component
- 1 **Button** component

### Configure the Columns Component

The Columns component helps organize your module.

1. Drag and drop a **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component onto your canvas.
2. In the Property ID field, enter **columns**.
3. Under **Formatting**, click the icon displaying ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/two_column_frame.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) (two) evenly-spaced columns.
4. Click **Save & Close**.

### Configure the Text Field Components

Start the configuration with two Text Field components to capture the end-user's first and last names. By placing the Text Field components in the Columns component, the fields will appear next to each other.

1. Drag and drop two **T****ext Field** components onto your canvas. Place one component in each column of your **columns ![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component.
2. In the Property ID and Label Text fields, enter the following:

| Property ID | Label Text |
| --- | --- |
| **firstName** | First Name |
| **lastName** | Last Name |
3. **Save & Close** each component as you add it.

### Configure the Email Component

Next, an Email component collects the end-user's email address.

1. Drag and drop an **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Email** component onto your canvas, placing it in the first column of the **columns ![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component, below the **T****ext Field** components.
2. In the Property ID field, enter **emailAddress**.
3. In the Label Text field, enter `Email Address`.
4. Click **Save & Close**.

### Configure the Phone Number Component

Use a dedicated Phone Number component to collect the end-user's phone number.

1. Drag and drop a **P****hone Number** component onto your canvas, placing it in the first column of the **columns ![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component, below the **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Email** component.
2. In the Property ID field, enter **phoneNumber**.
3. In the Label Text field, enter `Phone Number`.
4. Click **Save & Close**.

### Configure the Button Component

The **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(12).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Button** component saves and creates a submission with the information on the page. After you customize your button's appearance, ask the end-user for permission to contact them.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(12).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Button** component onto your canvas, placing it in the first column of the **columns![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(9).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) Columns** component, below the **phoneNumber** **P****hone Number** component.
2. In the Property ID field, enter **btnSave**.
3. In the Label Text field, enter `Save`.
4. Set the Action Type to **Save**.
5. In the Advanced Settings field, enter `glyphicon glyphicon-ok-sign`. Entering this adds a checkmark icon to your button.

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button_v3_05_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button%20v3%2005.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)
6. Set the Display Dialog on Click toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D) **(ON)**.
7. In the field, enter `Please read and confirm`.
8. In the field, enter `I agree to share my information with Farmers Insurance Group. I give permission to Farmers Insurance Group to contact me.`.
9. In the field, enter `No, cancel`.
10. In the field, enter `OK, continue`.

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button_v3_06_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button%20v3%2006.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)
11. Click **Save & Close**.
12. **Save** your module.

Preview your module in Express View. You'll see the following functionality:

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button_v3_07_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Button%20v3%2007.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A37Z&se=2026-11-07T18%3A57%3A37Z&sr=c&sp=r&sig=opJXtzTT1i7GVNZMrT0ZLzmueWcKp0N4TXLrBe7Imtc%3D)

## Resources

- [Modify the Button component using the toolbar settings.](/v1/docs/component-toolbar-settings)
- [Additional Secondary Field Components](/v1/docs/introduction-to-secondary-fields).
- [Triggering Decisions with Buttons](/v1/docs/how-to-trigger-decisions-with-buttons).
- [Creating Custom Navigation Buttons.](/v1/docs/use-case-custom-navigation-buttons)
- [Triggering Initializers with Buttons.](/v1/docs/use-case-triggering-initializers-with-buttons)
- [Triggering Multiple Components Using a Single Button](https://community.unqork.com/platform-q-a-10/multiple-component-triggering-through-button-post-trigger-9359).

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Displays or hides a confirmation dialog on button-click. The confirmation dialog also allows end-users to confirm their intention to complete the Button's associated action.

The action performed by the button when selected.