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
TIP To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.
Display Panel
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 (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 (OFF) unhides the Button. The component will always remain visible in the Module Builder.
By default, the Hide Button toggle is set to (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's look and feel; there's no effect on the Button's function.
Button Width
A choice chip showing the following options:
Fixed: The Button's width adjusts based on the length of its Label Text.
Block: The Button's width is the full width of the page or column, with the Label Text centered.
Restrict to Single Click
When set to (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 (OFF).
Actions Panel
Triggers
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 (ON) for the Screen/Task node linked to your module.
The Property ID of the component that triggers after all the outputs are set.
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.
Setting
Description
Save
Saves, validates, and creates a submission to the database. 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.
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.
Save Draft
Saves and creates a submission to the database but doesn't validate the page's information. 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.
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. Triggers include:
On Click: Enter the Property ID of the component that you want to trigger on each button-click.
Click Event: Enter an Event ID to assign the Button's designated event. You can then reference this Event ID in other components.
Validate
Validates the information on the page but doesn't create a submission. Triggers include:
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.
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. Triggers include:
On Click: Enter the Property ID of the component that you want to trigger on each button-click.
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.
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 (ON) hides the success message.
By default, the Hide Success Message toggle is set to (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 (ON) hides the error message.
By default, the Hide Error Message toggle is set to (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
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 (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 (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 (OFF).
Disable on Invalid Forms
When set to (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 (OFF).
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.
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:
Under Formatting, click the icon displaying (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 Text Field components onto your canvas. Place one component in each column of your columns Columns component.
Click Save Component for each component as you complete it.
Configure the Email Component
Next, an Email component collects the end-user's email address.
1.
Drag and drop an Email component onto your canvas, placing it in the first column of the columns Columns component, below the firstName Text Field component.
Use a dedicated Phone Number component to collect the end-user's phone number.
1.
Drag and drop a Phone Number component onto your canvas, placing it in the first column of the columns Columns component, below the emailAddress Email component.
The 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 onto your canvas, placing it in the first column of the columns Columns component, below the phoneNumber Phone Number component.
In the Dialog MessageDisplay Dialog on Click field, enter I agree to share my information with Farmers Insurance Group. I give permission to Farmers Insurance Group to contact me..
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.
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
TIP To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.
Display Panel
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 (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 (OFF) unhides the Button. The component will always remain visible in the Module Builder.
By default, the Hide Button toggle is set to (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's look and feel; there's no effect on the Button's function.
Button Width
A choice chip showing the following options:
Fixed: The Button's width adjusts based on the length of its Label Text.
Block: The Button's width is the full width of the page or column, with the Label Text centered.
Restrict to Single Click
When set to (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 (OFF).
Actions Panel
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 (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.
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 (ON) hides the success message.
By default, the Hide Success Message toggle is set to (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 (ON) hides the error message.
By default, the Hide Error Message toggle is set to (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
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 (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 (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 (OFF).
Disable on Invalid Forms
When set to (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 (OFF).
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.
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:
Under Formatting, click the icon displaying (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 Text Field components onto your canvas. Place one component in each column of your columns Columns component.
The 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 onto your canvas, placing it in the first column of the columns Columns component, below the phoneNumber Phone Number component.
In the Dialog MessageDisplay Dialog on Click field, enter I agree to share my information with Farmers Insurance Group. I give permission to Farmers Insurance Group to contact me..
Columns component helps organize your module.
(two) evenly-spaced columns.
Text Field components onto your canvas. Place one component in each column of your columns 
Email component collects the end-user's email address.
Phone Number component to collect the end-user's phone number.
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.
(
