<h3>Action Button</h3><blockquote><a href="https://85e6f1e0-e54f-4616-b2a6-5b515b4d01e0-00-3lx1q196ugn4f.kirk.replit.dev/formv2?v3=true&amp;component=button" target="_blank" rel="noopener noreferrer nofollow" class="cursor-pointer box-border font-semibold border-b hover:border-b-[2px] transition-all duration-75 " style="text-decoration: none; color: inherit; border-color: var(--portal-accent-color);">See live demo!</a></blockquote>Executes specific workflow logic or external actions.<ul class="accent-bullets"><li>Triggers APIs, scripts, or downstream steps</li><li>Displays live state: loading, success, error</li><li>Supports confirmation prompts before execution</li><li>Obeys conditional visibility and validation rules</li><li>Integrated with workflow context and data binding</li></ul><h3>Decision Buttons</h3><blockquote><a href="https://85e6f1e0-e54f-4616-b2a6-5b515b4d01e0-00-3lx1q196ugn4f.kirk.replit.dev/component-demo?component=decision-buttons" target="_blank" rel="noopener noreferrer nofollow" class="cursor-pointer box-border font-semibold border-b hover:border-b-[2px] transition-all duration-75 " style="text-decoration: none; color: inherit; border-color: var(--portal-accent-color);">See live demo!</a></blockquote>For approvals, rejections, or custom review logic.<ul class="accent-bullets"><li>States: Approve, Reject, Request Changes</li><li>Color-coded to signal decision types</li><li>Can require comments before submission</li><li>Supports audit trail capture and workflow transitions</li><li>Assignable by role or user</li></ul><h3>Navigation Controls</h3>Drives form flow across multi-screen layouts.<ul class="accent-bullets"><li>Includes Next, Previous, Finish buttons</li><li>Runs per-step validation before navigation</li><li>Supports “Save and Continue Later” functionality</li><li>Integrates with breadcrumb or progress UI</li><li>Controls dynamic screen logic in workflows</li></ul><hr><h2>Button Styling System</h2><h3>Primary Variants</h3><ul class="accent-bullets"><li>Primary: <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">#0900E3</code> background, white text</li><li>Outline: <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">#0900E3</code> border, blue text</li><li>Ghost: Transparent background, <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">#0900E3</code> text</li></ul><h3>Neutral Variants</h3><ul class="accent-bullets"><li>White: White background, slate text</li><li>Gray: <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Slate-100</code> background, slate text</li><li>Gray Outline: Slate border, slate text</li></ul><h3>Danger Variants</h3><ul class="accent-bullets"><li>Destructive: Red-500 background, white text</li><li>Danger Outline: Red border, red text</li><li>Danger White: White background, red text</li></ul>All variants support responsive design, hover/focus states, and accessibility compliance.<hr><h2>How to Configure Buttons</h2><h3>1. Add Button Text</h3>Enable the Label toggle, then enter your button label in the input field. Use the ✕ icon to quickly clear it.<h3>2. Add an Icon (Optional)</h3>Enable the Icon toggle, then click the icon field to browse from categorized options.<h3>3. Choose Icon Position</h3>Choose Left, Right, or toggle off the label to create an icon-only button.<blockquote>Smart behavior: Turning off the label automatically locks the button as icon-only to prevent empty-state buttons.</blockquote><hr><h2>Available Icons</h2>Organized by category to match your use case:<table style="min-width: 50px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1">Category</th><th colspan="1" rowspan="1">Icons</th></tr><tr><td colspan="1" rowspan="1">Actions</td><td colspan="1" rowspan="1">Arrow, Plus, Check, Search</td></tr><tr><td colspan="1" rowspan="1">System</td><td colspan="1" rowspan="1">Settings, Alert, Trash, Link</td></tr><tr><td colspan="1" rowspan="1">Communication</td><td colspan="1" rowspan="1">Mail, Globe, File, User</td></tr><tr><td colspan="1" rowspan="1">Emojis</td><td colspan="1" rowspan="1">😀 😂 ❤️ and others</td></tr></tbody></table><hr><h2>What Buttons Can Do</h2><h3>Form Actions</h3><ul class="accent-bullets"><li>Submit form data</li><li>Move to next or previous section</li><li>Save progress and continue later</li></ul><h3>Workflow Triggers</h3><ul class="accent-bullets"><li>Call APIs or webhook endpoints</li><li>Trigger automation nodes</li><li>Update workflow state or variable values</li></ul><h3>Decision Points</h3><ul class="accent-bullets"><li>Drive approval or rejection logic</li><li>Capture reviewer feedback</li><li>Redirect flow based on button clicked</li></ul><hr><h2>Advanced Properties &amp; Events</h2><h3>Configuration Parameters</h3><table style="min-width: 50px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1">Field</th><th colspan="1" rowspan="1">Purpose</th></tr><tr><td colspan="1" rowspan="1"><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Button text</code></td><td colspan="1" rowspan="1">Sets the visible label of the button</td></tr><tr><td colspan="1" rowspan="1"><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Label</code> (toggle)</td><td colspan="1" rowspan="1">Controls whether text is shown on the button</td></tr><tr><td colspan="1" rowspan="1"><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Add info icon</code></td><td colspan="1" rowspan="1">Adds a tooltip icon with custom message</td></tr><tr><td colspan="1" rowspan="1"><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Icon</code> (toggle)</td><td colspan="1" rowspan="1">Enables icon next to text or as standalone</td></tr><tr><td colspan="1" rowspan="1"><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Horizontal alignment</code></td><td colspan="1" rowspan="1">Aligns the button left, center, or right</td></tr></tbody></table><h3>Component Functions</h3>Use programmatic control during workflow execution:<code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">disable(path) // Disables the button (non-interactive) enable(path) // Re-enables the button setloading(true, path) // Shows a spinner while processing</code><h3>Event Hooks</h3>Respond to button clicks using:<code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">on_&lt;component_id&gt;_click(path)</code>Trigger logic, API calls, field updates, or conditional flows based on user input.

Build Any UI

Button components enable interactive user actions in your forms—such as submitting data, navigating steps, or triggering workflows. Each button can be styled, configured, and bound to workflow logic u