AX - Button

Overview

AX - Button is an Experience Cloud component that creates clickable buttons on Experience Sites pages to trigger actions like navigation, form submissions, record creation, or opening modals.

Use it to add custom calls-to-action, submit forms, navigate to specific pages, create records, or trigger flows. Configure the button's label, styling, icon, and action in Experience Builder without code.

Perfect for portal CTAs, custom navigation, "Contact Us" actions, record creation workflows, or any user interaction that needs a clear, branded button.

---

Setting Up Your Button

After dragging AX - Button onto your page in Experience Builder, you'll configure two main things: how the button looks and what happens when users click it.

Button Appearance

These settings control how your button looks on the page.

Label – The text displayed on the button. Keep it short and action-oriented (e.g., "Submit Request," "View Details," "Contact Us").

Icon Name – Add an icon next to the label to help users quickly understand the action. Choose from Salesforce's icon library—common choices include "utility:download" for downloads or "utility:email" for contact actions.

Icon Position – Place the icon to the left or right of the label. Left positioning works well for most cases, while right positioning can indicate forward navigation.

Variant – The button's visual style. Options typically include primary (bold, attention-grabbing), secondary (subtle), or destructive (red, for delete actions). Choose based on how important the action is.

Horizontal Alignment – Position the button within its container—left, center, or right. Center alignment works well for standalone CTAs, while left alignment suits form buttons.

Stretch – When enabled, the button expands to fill the full width of its container. Use this for prominent CTAs or when you want the button to match the width of form fields above it.

Disabled – Prevents users from clicking the button. Use this when an action isn't available yet—like disabling a "Submit" button until required fields are completed

Button Actions (Link To)

The Link To setting determines what happens when users click the button. Choose the action type that matches what you want to accomplish.

Show Toast

Displays a brief notification message that appears at the top of the page and disappears after a few seconds.

When to use it: Confirmation messages like "Changes saved" or "Request submitted" that don't require user action. Toasts provide feedback without interrupting the user's workflow.

Navigate

Redirects users to another page—either within your Experience Site or an external URL.

When to use it: "Learn More" buttons that go to detail pages, "Back to Home" navigation, or links to external resources. You can navigate to standard pages, record pages, or custom URLs.

Open Alert Modal

Opens a popup window with a message that users must acknowledge before continuing.

When to use it: Important notices that users need to read, like terms and conditions, privacy disclosures, or warnings before they proceed with an action.

Open Confirm

Displays a confirmation dialog asking users to confirm or cancel their action.

When to use it: Actions with consequences that can't be undone, like deleting a record, canceling a submission, or removing access. The dialog gives users a chance to reconsider before proceeding.

Open Flow Dialog

Launches a Salesforce Flow in a popup modal window.

When to use it: Multi-step processes like submitting a support case, completing a survey, updating account information, or any guided workflow. Build the flow in Flow Builder, then connect it to the button—the flow runs inside the modal without navigating away from the current page

---

Specifications

Properties

Name	Description	Usage
Label	Define the text displayed on the button.	Enter a concise, clear label that indicates the button’s action to the user.
Icon Name	Choose an icon to display on the button.	Select an appropriate icon that visually represents the button’s action, enhancing user comprehension.
Icon Position	Determine the position of the icon within the button.	Choose a position that visually balances the button and aligns with the design direction of your webpage.
Variant	Select a predefined style variant for the button.	Choose a variant that suits the context of the button’s action and the overall design language of the webpage.
Horizontal Alignment	Define the horizontal alignment of the button within its container.	Align the button to achieve visual harmony and meet the layout requirements of the webpage.
Strech	Determine whether the button should stretch to fill its container.	Enable this option to make the button expand horizontally, filling the available space within its container.
Disabled	Control the button’s active or disabled state.	Disable the button to prevent user interaction, useful in conditions where a certain action is not applicable or should be prevented temporarily.

Appearance