Button Component

The Button component triggers an action when clicked: saving, validating, navigating, or firing an event. It supports pre- and POST-save triggers, user feedback dialogs, and confirmation dialogs.

How to read settings tables

The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting	Field	Type	Default	Description
Property ID	`key`	Text input	`btn`	The unique identifier for this component instance.

Display Settings

Field Text

Setting	Field	Type	Default	Description
Label Text	`label`	Text input	`Submit`	The text displayed on the button.

Default State Options

Setting	Field	Type	Default	Description
Hide Field	`hidden`	Toggle	OFF	Hides the button from end-users but always displays in the Module Builder.

Formatting

Setting	Field	Type	Default	Description
Button Style	`theme`	Drop-down	Primary	Drop-down that sets the visual color style of the button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, Link.
Button Width	`block`	Radio button	Fixed	Controls whether the button spans the full container width. Options include: Fixed (default), Block (full width).
Restrict to Single Click	`oneClickOnly`	Toggle	OFF	Disables the button immediately after the first click to prevent duplicate submissions.

Actions Settings

Element Type

Setting	Field	Type	Default	Description
Element Type	`elementType`	Choice chip	Module	Sets whether the button acts on a module or a workflow. Options include: Module, Workflow.

Action Type

Module — Sets the action performed when the button acts on a module.

Setting Field Type Default Description

Action Type action Choice chip Save Sets the action performed when the button is clicked.

Click Event event Text input — The event ID fired when the button is clicked. Visible when Action Type is Event.

Action Type Description

Save Validates and saves the module.

Save Draft Saves without validation.

Event Fires a click event.

Validate Validates without saving.

Reset Clears all field values and resets states.

Setting	Field	Type	Default	Description
Action Type	`action`	Choice chip	Save	Sets the action performed when the button is clicked.
Click Event	`event`	Text input	—	The event ID fired when the button is clicked. Visible when Action Type is Event.

Action Type	Description
Save	Validates and saves the module.
Save Draft	Saves without validation.
Event	Fires a click event.
Validate	Validates without saving.
Reset	Clears all field values and resets states.

Workflow — Sets the navigation action performed when the button acts on a workflow.

Setting Field Type Default Description

Action Type action Choice chip Next Options include: Next, Previous, Go to.

Step gotoStepPath Text input — The unique path of the workflow step to navigate to. Visible when Action Type is Go to.

Setting	Field	Type	Default	Description
Action Type	`action`	Choice chip	Next	Options include: Next, Previous, Go to.
Step	`gotoStepPath`	Text input	—	The unique path of the workflow step to navigate to. Visible when Action Type is Go to.

Triggers

Module

Setting Field Type Default Description

Before Save preSaveTrigger Property ID — Triggers a component before the save action executes. Visible for Save, Save Draft.

After Save postSaveTrigger Property ID — Triggers a component after the save action completes. Visible for Save, Save Draft.

Before Validation preErrorTrigger Property ID — Triggers a component before validation runs. Visible for Save, Validate.

For Valid Form postValidationSuccessTrigger Property ID — Triggers a component when validation passes with no errors. Visible for Save, Validate.

For Invalid Form postValidationErrorTrigger Property ID — Triggers a component when validation returns errors. Visible for Save, Validate.

On Click clickTrigger Property ID — Triggers a component on every button click, regardless of action type.

Setting	Field	Type	Default	Description
Before Save	`preSaveTrigger`	Property ID	—	Triggers a component before the save action executes. Visible for Save, Save Draft.
After Save	`postSaveTrigger`	Property ID	—	Triggers a component after the save action completes. Visible for Save, Save Draft.
Before Validation	`preErrorTrigger`	Property ID	—	Triggers a component before validation runs. Visible for Save, Validate.
For Valid Form	`postValidationSuccessTrigger`	Property ID	—	Triggers a component when validation passes with no errors. Visible for Save, Validate.
For Invalid Form	`postValidationErrorTrigger`	Property ID	—	Triggers a component when validation returns errors. Visible for Save, Validate.
On Click	`clickTrigger`	Property ID	—	Triggers a component on every button click, regardless of action type.

Workflow

Setting Field Type Default Description

Before Save preSaveTrigger Property ID — Triggers a component before the save action executes. Visible for Next, Go to.

After Save postSaveTrigger Property ID — Triggers a component after the save action completes. Visible for Next, Previous, Go to.

Before Validation preErrorTrigger Property ID — Triggers a component before validation runs. Visible for Next, Go to.

On Click clickTrigger Property ID — Triggers a component on every button click, regardless of action type.

Setting	Field	Type	Default	Description
Before Save	`preSaveTrigger`	Property ID	—	Triggers a component before the save action executes. Visible for Next, Go to.
After Save	`postSaveTrigger`	Property ID	—	Triggers a component after the save action completes. Visible for Next, Previous, Go to.
Before Validation	`preErrorTrigger`	Property ID	—	Triggers a component before validation runs. Visible for Next, Go to.
On Click	`clickTrigger`	Property ID	—	Triggers a component on every button click, regardless of action type.

User Feedback

Setting	Field	Type	Default	Description
Hide Success Message	`doNotShowSavedPopup`	Toggle	OFF	Hides the success dialog after the action completes. Visible for Save, Save Draft, Next, Previous, Go to.
Success Message	`successMessage`	Text input	`Success!`	The text displayed in the success dialog.

Error Message

Setting	Field	Type	Default	Description
Hide Error Message	`hideErrorMessage`	Toggle	OFF	Hides the error dialog when validation fails. Visible for Save, Validate, Next, Previous, Go to.
Error Title	`errorTitle`	Text input	`Oops - {{ errors }} error(s) have been found!`	The heading of the error dialog.
Error Message	`errorMessage`	Text input	`Please check your module and fix fields outlined in red`	The body text of the error dialog.

Advanced Settings

Additional Display Options

Setting	Field	Type	Default	Description
Display Dialog on Click	`showSaveConfirmation`	Toggle	ON	Displays a confirmation dialog before the button action executes.
↳ Dialog Heading	`confirmation`	Text input	—	The heading text of the confirmation dialog. Visible when Display Dialog on Click is ON.
↳ Dialog Message	`confirmationText`	Text area	—	The body text of the confirmation dialog. Visible when Display Dialog on Click is ON.
↳ Button Label for Dismiss	`cancelButton`	Text input	`Cancel`	The label on the dismiss button in the confirmation dialog. Visible when Display Dialog on Click is ON.
↳ Button Label for Confirm	`confirmationButton`	Text input	`OK`	The label on the confirm button in the confirmation dialog. Visible when Display Dialog on Click is ON.
Prevent Disabling on	`preventDisableOnSubmitting`	Toggle	OFF	Keeps the button enabled after a submission is created, preventing premature disabling from keyboard submit.
Disable on Invalid Forms	`disableOnInvalid`	Toggle	OFF	Disables the button when the module has validation errors.

Additional Styling

Setting	Field	Type	Default	Description
Custom CSS Styling	`customClass`	Text input	—	A CSS class applied to the button for custom styling.
Left Icon	`leftIcon`	Text input	—	A CSS icon class displayed to the left of the button label (for example, `fas fa-plus`).
Right Icon	`rightIcon`	Text input	—	A CSS icon class displayed to the right of the button label.

Accessibility Settings

For details on each setting, its options, and when to use it, see Accessibility Settings Reference.

Setting	Field	Type	Default	Description
ARIA Label	`ariaLabelOption`	Drop-down	None	Sets how to label this element for screen readers. Options include: None, Custom Label, or Reference Label(s).
Opens a Popup on Click	`ariaHasPopupToggle`	Toggle	OFF	Indicates that this button controls a popup element.
↳ Type of Popup	`ariaHasPopup`	Drop-down	—	Specifies the type of popup this button controls. Options include: Dialog, Grid, Listbox, Menu, Tree. Visible when Opens a Popup on Click is ON.

Operations Builder

This component supports the Operations Builder in Vega modules. When the module or panel is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.

Changelog

Date	Change
—	Initial publication.

Documentation Index