Button Component

The Button component creates clickable buttons that trigger actions in your app. Use buttons to save data, navigate between views, delete records, open URLs, and more.

Overview

Buttons are the primary way users interact with your app. Each button can:

Trigger any action type (CRUD, navigation, messages)
Display with different visual styles
Include icons for clarity
Show confirmation dialogs for destructive actions
Be conditionally disabled based on data

Adding a Button Component

Open the Layout tab in your app editor
Drag the Button component from the palette onto your canvas
Select the component to open the settings panel
Configure the label, action, and styling

Settings

Setting	Type	Description
Label	Text/Formula	Button text
Icon	Icon picker	Optional icon
Icon Position	Dropdown	left or right
Variant	Dropdown	Visual style
Size	Dropdown	sm, md, or lg
Action	Action selector	Action to trigger on click
Disabled Condition	Formula	When button should be disabled
Confirm Dialog	Toggle	Show confirmation before action
Confirm Message	Text	Confirmation dialog message

Button Variants

Choose the appropriate visual style for your button’s purpose:

Variant	Appearance	Use Case
primary	Solid background, brand color	Primary actions (Save, Submit, Create)
secondary	Muted background	Secondary actions (Cancel, Back)
outline	Bordered, transparent background	Alternative actions
ghost	No background, text only	Subtle actions, links
destructive	Red/warning color	Delete, Remove, Dangerous actions

Choosing the Right Variant

Primary: "Save Changes", "Create New", "Submit"
Secondary: "Cancel", "Go Back", "Skip"
Outline: "Learn More", "View Details"
Ghost: "Edit", "More Options"
Destructive: "Delete", "Remove", "Revoke Access"

Button Sizes

Size	Description	Use Case
sm	Small, compact	Inline actions, tight spaces
md	Medium, default	Standard buttons
lg	Large, prominent	Primary calls to action

Icons

Add icons to make buttons more recognizable:

Icon Position

left - Icon appears before the text (default)
right - Icon appears after the text

Icon-Only Buttons

For compact buttons, use an icon with an empty label:

Label: (empty)
Icon: trash
Size: sm

Common Icon Choices

Action	Suggested Icons
Create	plus, plus-circle
Save	save, check
Edit	edit, pencil
Delete	trash, x
Navigate	arrow-right, chevron-right
Download	download, file-down
Upload	upload, file-up
Search	search, magnifying-glass
Refresh	refresh-cw, rotate-cw
Settings	settings, cog

Configuring Actions

Selecting an Action

In the button settings, click Action
Choose an existing action or create a new one
Configure any action-specific parameters

Creating Inline Actions

For simple one-off actions, create them directly from the button settings:

Click Action > Create New
Choose the action type
Configure the action parameters
The action is created and assigned automatically

Action Types

Type	Description
Create Row	Insert a new record
Update Row	Modify an existing record
Delete Row	Remove a record
Navigate	Go to another view
Open URL	Open an external link
Show Message	Display a notification
Run Formula	Execute a formula

Dynamic Labels

Use formulas to create dynamic button text:

Label: Save {{$row.name}}

Label: {{IF($row.is_published, 'Unpublish', 'Publish')}}

Label: Delete ({{COUNT($selectedRows)}})

Disabled State

Conditionally disable buttons using formulas:

Validation

Disabled Condition: {{ISNULL($row.name) OR $row.name = ''}}

Permission-Based

Disabled Condition: {{$user.role != 'admin'}}

State-Based

Disabled Condition: {{$row.status = 'completed'}}

Multiple Conditions

Disabled Condition: {{ISNULL($row.name) OR $row.email = '' OR $row.status = 'locked'}}

Disabled buttons appear grayed out and cannot be clicked.

Confirmation Dialogs

For destructive or important actions, require user confirmation:

Enabling Confirmation

Toggle Confirm Dialog to enabled
Enter a custom Confirm Message
Users must click “Confirm” before the action runs

Confirmation Message

Write clear, specific confirmation messages:

Are you sure you want to delete "{{$row.name}}"? This cannot be undone.

This will send {{COUNT($selectedRows)}} emails. Continue?

Publishing will make this visible to all users. Proceed?

When to Use Confirmation

Always use confirmation for:

Delete operations
Bulk actions affecting multiple records
Sending emails or notifications
Publishing or unpublishing content
Any action that cannot be undone

Button Context

Buttons have access to context variables:

Variable	Description	Availability
`$row`	Current row	In list row context
`$selectedRows`	Selected rows	With list selection enabled
`$user`	Current user	Always available
`$app`	App metadata	Always available
`$params`	URL parameters	Always available

Common Patterns

Save Button

Label: Save Changes
Icon: save
Variant: primary
Size: md
Action: Update Row
Disabled Condition: {{!$hasChanges}}

Delete with Confirmation

Label: Delete
Icon: trash
Variant: destructive
Size: sm
Action: Delete Row
Confirm Dialog: enabled
Confirm Message: Delete "{{$row.name}}"? This cannot be undone.

Create New

Label: Add Item
Icon: plus
Icon Position: left
Variant: primary
Size: md
Action: Create Row

Navigate to Detail

Label: View Details
Icon: arrow-right
Icon Position: right
Variant: outline
Size: sm
Action: Navigate
Target View: item-details
Parameters: id={{$row.id}}

Bulk Action

Label: Delete Selected ({{COUNT($selectedRows)}})
Icon: trash
Variant: destructive
Size: md
Action: Delete Row (bulk)
Disabled Condition: {{COUNT($selectedRows) = 0}}
Confirm Dialog: enabled
Confirm Message: Delete {{COUNT($selectedRows)}} items?

Toggle State

Label: {{IF($row.is_active, 'Deactivate', 'Activate')}}
Icon: {{IF($row.is_active, 'pause', 'play')}}
Variant: {{IF($row.is_active, 'secondary', 'primary')}}
Action: Update Row
Field Values:
  - is_active: {{!$row.is_active}}

External Link

Label: Open Document
Icon: external-link
Icon Position: right
Variant: ghost
Action: Open URL
URL: {{$row.document_url}}

Form Submit

Label: Submit
Icon: check
Variant: primary
Size: lg
Action: Create Row
Disabled Condition: {{ISNULL($form.name) OR ISNULL($form.email)}}
Confirm Dialog: enabled
Confirm Message: Submit this form?

Button Groups

Place multiple buttons together for related actions:

Primary + Secondary

[Save Changes (primary)] [Cancel (secondary)]

Action Bar

[Add (primary)] [Edit (outline)] [Delete (destructive)]

Icon Button Group

[Edit icon] [Duplicate icon] [Delete icon]

Styling Tips

Visual Hierarchy

Use one primary button per section for the main action
Use secondary/outline for alternative actions
Use ghost buttons for less important actions

Sizing

Match button sizes within a group
Use larger buttons for calls to action
Use smaller buttons for inline/row actions

Consistency

Use the same variant for similar actions across your app
Keep destructive actions visually distinct (red)
Maintain consistent icon usage

Accessibility

Best Practices

Always include descriptive label text
For icon-only buttons, the icon should be universally recognizable
Ensure disabled states are visually distinct
Provide clear feedback after actions complete

Buttons are focusable with Tab
Activate with Enter or Space
Focus state is visually indicated

Troubleshooting

Common Issues

Issue	Cause	Solution
Button does nothing	No action assigned	Assign an action in settings
Action fails	Invalid action config	Check action parameters
Always disabled	Formula always true	Review disabled condition
Wrong label	Formula error	Check formula syntax

Debugging Tips

Remove the disabled condition to test the button
Verify the action works with static values
Check the browser console for errors
Test formulas in the formula editor first

Actions - Configure button actions
Formulas - Write dynamic labels and conditions
List Component - Use buttons with lists
Text Component - Combine with text for CTAs