---
title: "Button Component"
slug: "button-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T17:03:26Z
published: 2026-09-15T17:03: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

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. |

  

> **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**. |

### 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. |

  

> **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. |

### 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](/unqorkai/docs/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](/unqorkai/docs/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.

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.

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.

The action performed by the button when selected.

Enter the Property ID of the component that you want to trigger on each button-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.

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

ARIA (Accessible Rich Internet Applications) is a set of attributes used in HTML to enhance the accessibility of web content, particularly dynamic or interactive web pages, for users who rely on assistive technologies like screen readers.

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

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

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.