Buttons and Actions

Buttons and Actions Page Elements provide controls that users can click or tap to navigate, reveal interface content, open menus, and start application workflows from a Page, Form, or Page Slice.

Use these elements when the interface needs a clear next step, such as opening a report, showing more details, adding a record, or saving changes.

Buttons and Links are added through the Element Library and configured through Element Settings. For structured navigation, see Menus and Navigation. For custom interaction logic, see Page Flow.

Available Button and Action Elements

Element	Purpose
Link	Navigates to another Project page, an external URL, or another supported destination.
Link Button	Presents a Link with button styling while retaining its link configuration.
Button	Provides a control for built-in interface actions or application behavior handled through Page Flow.
Button Group	Arranges related Buttons or button-styled Links as a visual group.

Link Button is a presentation option for a Link, not a separate element type that requires different navigation configuration.

These controls can be placed inside Layout Columns, Content Areas, Flexible Areas, cards, Forms, and other supported parent elements. Their available placement depends on the parent-child structure of the page.

Link

A Link takes users to a destination. Use it for navigation within the Project, external resources, and contextual links within page content.

Examples include:

• Opening a reports page.
• Linking to product documentation.
• Returning to a dashboard.
• Moving to a supported section of the current page.

In Element Settings, a Link can control:

Setting	Purpose
HRef	Sets the destination URL or page path.
Target	Determines whether navigation occurs in the current tab or a separate tab/window.
Link Action	Configures a supported built-in interface action.
Action Target	Identifies the element affected by the Link Action, when needed.
Type	Displays the Link as an ordinary link or as a button.
Button Look	Sets the appearance when Type is set to Button.
Button Size	Sets the size when Type is set to Button.
Popup Menu Icon	Adds a dropdown indicator for a menu-style interaction.
Split Look	Applies a split-control appearance for a menu-style interaction.

HRef

HRef specifies the Link destination. It may be a Project page path, a complete external URL, or another supported destination.

Use stable destinations and check that the intended audience can access them. If the control is intended to perform an interface action instead of navigation, configure the appropriate Link Action or use a Button with Page Flow, as applicable.

Target

Target controls where the destination opens.

Target	Behavior
Default	Opens the destination in the current tab.
Separate Tab/Window	Opens it in a new tab or window, according to browser behavior.

Use Default for ordinary Project navigation. A separate tab or window can be useful for external resources that users may want to consult without leaving the current page.

Link Action and Action Target

Link Action configures a built-in interface interaction. Action Target supplies the target for actions that need one.

Common built-in Link Actions include:

Link Action	Action Target	Behavior
collapse	An element selector, such as #MoreDetails.	Expands or collapses the matching Collapsible Area.
dropdown	Usually left blank when the Popup Menu is associated with the Link in the page structure.	Opens or closes the associated Popup Menu.

For an action that addresses an element by ID, enter # followed by that element's ID. For example, a Collapsible Area with ID MoreDetails is targeted with #MoreDetails.

These actions are for standard interface mechanics. They do not replace Page Flow for validation, data operations, or other application logic. When combining navigation and action-related settings, preview the control to confirm that its behavior matches the intended interaction.

Link Button

Set a Link's Type to Button to present navigation as a prominent button-styled control.

For example:

• View Report
• Open Billing Portal
• Go to Dashboard

The Link continues to use HRef and Target for navigation, while Button Look and Button Size control its presentation.

Choose a Link Button when the primary purpose is navigation. Use a Button when the user is initiating an operation, opening a modal Form through Page Flow, or performing another application action.

Button

A Button is an action-oriented control. It can operate a built-in interface feature or act as the visible trigger for application behavior defined in Page Flow.

Use Buttons for interactions such as:

• Opening a Form in a modal.
• Starting a save, update, or delete workflow.
• Refreshing displayed records.
• Showing or hiding a section.
• Opening a Popup Menu.
• Continuing to the next step of a workflow.

Adding a Button does not automatically implement an application workflow. Configure the relevant built-in action or connect the Button to Page Flow behavior.

In Element Settings, a Button can control:

Setting	Purpose
Button Content	Sets the visible label.
Button Look	Sets the visual style, including color and outline variants.
Button Size	Sets the control's size.
Button Action	Configures a supported built-in interface action.
Action Target	Identifies the element affected by the Button Action, when needed.
Popup Menu Icon	Adds a dropdown indicator for a menu-style interaction.
Split Look	Applies a split-control appearance for a menu-style interaction.

Button Content

Button Content is the label users see. Prefer short, specific, action-oriented text that describes the expected result.

Examples include Save Changes, Add Customer, Refresh Data, Send Invite, and Show Details.

Avoid generic labels such as Click Here, or Submit when a more descriptive label is available. The label should also match the configured behavior; a Button labeled Save Changes should not unexpectedly navigate away without saving.

Button Look

Button Look determines the visual emphasis of the control.

Look	Typical Use
Blue	Primary actions and standard confirmation.
Green	Positive, successful, or creation-oriented actions.
Gray	Secondary actions.
Red	Destructive or high-risk actions.
Yellow	Warning or review-oriented actions.
Teal	Informational or supporting actions.
Light	Lower-emphasis controls on darker backgrounds.
Dark	Strong neutral actions.
Outline variants	Lower-emphasis alternatives to the corresponding filled styles.

Use looks consistently within a Project. A color should communicate the same general meaning across similar pages; for example, avoid using red for an ordinary non-destructive action if red is otherwise used for deletion.

Button Size

Button Size controls the size of the Button. Available choices include Default, Large, Medium, and Small.

Start with Default for most controls. Large can emphasize a primary call to action or support touch-heavy layouts. Small is useful for compact toolbars and repeated actions in dense content. Preview the resulting controls on desktop, tablet, and mobile widths.

Button Action and Action Target

Button Action configures built-in interface behavior, while Action Target identifies the affected element when the action requires a target.

Common built-in Button Actions include:

Button Action	Action Target	Behavior
collapse	An element selector, such as #FilterPanel.	Expands or collapses the matching Collapsible Area.
dropdown	Usually left blank when the Popup Menu is associated with the Button in its parent structure.	Opens or closes the associated Popup Menu.

For a target identified by an element ID, enter the ID prefixed with #. For example, #FilterPanel targets the element whose ID is FilterPanel.

Leave Button Action blank when Page Flow alone is responsible for the Button's operation. Configure both only when the control intentionally requires both a built-in interface action and custom behavior, and test the resulting interaction.

Popup Menus and Split Controls

Buttons and Links can serve as controls for Popup Menus. The trigger control and the menu content are separate parts of the interface: configuring the trigger does not create the menu or its items.

Popup Menu Icon

Popup Menu Icon adds a dropdown indicator to the Button or Link, signaling that the control provides additional choices.

To configure a basic dropdown interaction:

1. Add the Button or Link in a supported menu-related structure.
2. Add the associated Popup Menu and its Popup Menu Items.
3. Set Button Action or Link Action to dropdown.
4. Leave Action Target blank when the Popup Menu is associated with the trigger through its surrounding structure.
5. Enable Popup Menu Icon if a visible dropdown indicator is appropriate.
6. Save and preview the interaction to confirm the menu opens and closes as expected.

For more about menu elements and their parent-child structure, see Menus and Navigation.

Split Look

Split Look applies a split-control appearance to a Button or button-styled Link. It is useful when a primary action and access to related menu choices should appear visually connected but distinct.

For example, a Button Group might present Save as the primary action and a neighboring dropdown control with options such as Save and Close.

Split Look changes presentation only. It does not automatically create a second control, a Popup Menu, or menu items. Configure the necessary controls, menu structure, and actions separately.

Button Group

A Button Group arranges related Buttons or button-styled Links together so they read as a connected set of controls.

Common uses include record actions such as View, Edit, and Delete; pagination; related filters; and compact toolbars.

In Element Settings, a Button Group can control:

Setting	Purpose
Size	Sets the shared visual size for controls in the group.
Type	Arranges the group horizontally or vertically.
Popup Menu Direction	Controls the direction in which an associated Popup Menu opens.

Group Settings and Child Settings

The Button Group controls the arrangement and shared presentation of its child controls. It does not define each child's label, destination, look, or action.

Configure the Button Group for shared Size, horizontal or vertical Type, and Popup Menu Direction. Configure each Button or Link for its own Button Content or HRef, Button Look, and applicable Button Action or Link Action and Action Target.

A Button Group's Size is intended to make its child controls visually consistent. Avoid conflicting size settings on individual children unless that difference is deliberate.

Use a horizontal group for a compact row of actions. Use a vertical group when controls should stack or the available space is narrow.

Popup Menu Direction applies when a child control opens a menu. It controls placement (for example, a default, upward, leftward, or rightward opening direction); it does not make the child a dropdown trigger. The child still requires the appropriate dropdown action and an associated Popup Menu.

Built-In Actions and Page Flow

Built-in actions and Page Flow serve different purposes.

Requirement	Recommended Approach
Expand or collapse a Collapsible Area	Use collapse with the appropriate Action Target.
Open an associated Popup Menu	Use dropdown and configure the Popup Menu structure.
Navigate to a destination	Use a Link with HRef and Target.
Open a Form as a modal	Use a Button with the appropriate Page Flow behavior.
Validate inputs or respond to application data	Use Page Flow.
Retrieve or update records, or call backend logic	Coordinate the interaction in Page Flow and use Cloud Flow where server-side operations are required.
Show feedback or refresh content after an operation	Use Page Flow.

The Button or Link is the visible control. Its Element Settings define its content, appearance, and any supported built-in action. Page Flow defines the custom response to the user's interaction.

For application workflows, Page Flow can coordinate input validation, data retrieval, modal Forms, status messages, and updates to displayed content. When an operation requires trusted server-side execution, Page Flow can call Cloud Flow rather than placing that logic in the browser.

Example: Show or Hide Details

To make a Button toggle a Collapsible Area:

1. Add a Collapsible Area to the page.
2. Give that area an ID, such as MoreDetails.
3. Add a Button labeled Show Details.
4. Set Button Action to collapse.
5. Set Action Target to #MoreDetails.
6. Save and preview the page, then verify that the Button toggles the intended area.

This is a built-in interface action; no custom data workflow is needed for the toggle itself.

Example: Add a Customer Through a Modal Form

A customer-management page may include a Button labeled Add Customer.

1. Add the Button to the page.
2. Configure its click behavior in Page Flow to open the Customer Form as a modal.
3. Let the user enter and save the required information through the Form's configured workflow.
4. After a successful operation, use the appropriate Page Flow behavior to refresh the displayed customer records or show a confirmation message.

In this example, the Button is the trigger, Page Flow coordinates the interaction, and the Form handles its own configured input workflow. The Button's built-in collapse or dropdown action is not a substitute for this behavior.

For details, see Forms and Page Flow.

Choosing the Right Element

Need	Use
Navigate to another Project page or external URL	Link
Give navigation the prominence of a Button	Link with Type set to Button
Toggle a Collapsible Area	Button or Link with collapse
Open a Popup Menu	Button or Link with dropdown and an associated Popup Menu
Start an application workflow	Button with Page Flow
Open a Form in a modal	Button with Page Flow
Group closely related controls	Button Group
Build a larger navigation menu	Menus and Navigation elements

Choosing a control based on what it does—not just how it looks—makes the interface more predictable and easier to maintain.

Good Practices

• Use labels that clearly describe the result of an action.
• Prefer Links for navigation and Buttons for operations.
• Use Button Look consistently, with destructive actions visually distinct from routine actions.
• Keep related controls together and avoid grouping unrelated actions.
• Give elements used as Action Targets stable, unique IDs.
• Make the presence of additional menu choices visually clear.
• Provide confirmation or other appropriate safeguards for destructive operations.
• Save and preview controls at desktop, tablet, and mobile widths.
• Test built-in actions and Page Flow behavior after moving, duplicating, or replacing the elements they reference.

Common Mistakes

Avoid these patterns:

• Using generic labels such as Click Here without telling users what will happen.
• Using a Button for routine navigation when a Link would be more appropriate.
• Treating a button-styled Link as though it were a separate element with different navigation rules.
• Setting collapse without a valid Action Target, or pointing to the wrong element ID.
• Setting dropdown without creating and associating the required Popup Menu.
• Assuming Popup Menu Icon or Split Look creates menu functionality automatically.
• Expecting Button Action or Link Action to perform application data workflows that need Page Flow.
• Mixing child-control size settings in a Button Group without checking the result.
• Replacing a control or its target without revisiting related action settings and Page Flow references.

The most effective Buttons and Links have one understandable purpose: navigate, reveal an interface control, or initiate a defined application action.

Related Topics

• Element Library
• Element Settings
• Layout Elements
• Menus and Navigation
• Page Flow
• Forms