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 UnqorkAI platform. 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 Path
gotoStepPath
Text input
—
The unique 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 Path	`gotoStepPath`	Text input	—	The unique 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.
↳	`confirmation`	Text input	—	The heading text of the confirmation dialog. Visible when Display Dialog on Click is ON.
↳	`confirmationText`	Text area	—	The body text of the confirmation dialog. Visible when Display Dialog on Click is ON.
↳	`cancelButton`	Text input	`Cancel`	The label on the dismiss button in the confirmation dialog. Visible when Display Dialog on Click is ON.
↳	`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 Submission	`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`).
	`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 runtime is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.