Button Components

Action Button

Executes specific workflow logic or external actions.

• Triggers APIs, scripts, or downstream steps

• Displays live state: loading, success, error

• Supports confirmation prompts before execution

• Obeys conditional visibility and validation rules

• Integrated with workflow context and data binding

Decision Buttons

For approvals, rejections, or custom review logic.

• States: Approve, Reject, Request Changes

• Color-coded to signal decision types

• Can require comments before submission

• Supports audit trail capture and workflow transitions

• Assignable by role or user

Navigation Controls

Drives form flow across multi-screen layouts.

• Includes Next, Previous, Finish buttons

• Runs per-step validation before navigation

• Supports “Save and Continue Later” functionality

• Integrates with breadcrumb or progress UI

• Controls dynamic screen logic in workflows

Button Styling System

Primary Variants

• Primary: #0900E3 background, white text

• Outline: #0900E3 border, blue text

• Ghost: Transparent background, #0900E3 text

Neutral Variants

• White: White background, slate text

• Gray: Slate-100 background, slate text

• Gray Outline: Slate border, slate text

Danger Variants

• Destructive: Red-500 background, white text

• Danger Outline: Red border, red text

• Danger White: White background, red text

All variants support responsive design, hover/focus states, and accessibility compliance.

How to Configure Buttons

1. Add Button Text

Enable the Label toggle, then enter your button label in the input field. Use the ✕ icon to quickly clear it.

2. Add an Icon (Optional)

Enable the Icon toggle, then click the icon field to browse from categorized options.

3. Choose Icon Position

Choose Left, Right, or toggle off the label to create an icon-only button.

Smart behavior: Turning off the label automatically locks the button as icon-only to prevent empty-state buttons.

Available Icons

Organized by category to match your use case:

Category

Icons

Actions

Arrow, Plus, Check, Search

System

Settings, Alert, Trash, Link

Communication

Mail, Globe, File, User

Emojis

😀 😂 ❤️ and others

What Buttons Can Do

Form Actions

• Submit form data

• Move to next or previous section

• Save progress and continue later

Workflow Triggers

• Call APIs or webhook endpoints

• Trigger automation nodes

• Update workflow state or variable values

Decision Points

• Drive approval or rejection logic

• Capture reviewer feedback

• Redirect flow based on button clicked

Advanced Properties & Events

Configuration Parameters

Field

Purpose

Button text

Sets the visible label of the button

Label (toggle)

Controls whether text is shown on the button

Add info icon

Adds a tooltip icon with custom message

Icon (toggle)

Enables icon next to text or as standalone

Horizontal alignment

Aligns the button left, center, or right

Component Functions

Use programmatic control during workflow execution:

disable(path) // Disables the button (non-interactive) enable(path) // Re-enables the button setloading(true, path) // Shows a spinner while processing

Event Hooks

Respond to button clicks using:

on_<component_id>_click(path)

Trigger logic, API calls, field updates, or conditional flows based on user input.