> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button.md).

# 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.

## Configuration

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 (see [Interactions](#interactions)).

### Button Appearance

These settings control how your button looks on the page.

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

**Icon Name** adds 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** places the icon to the `left` or `right` of the label; left works well for most cases, while right can indicate forward navigation.

**Variant** is the button's visual style: `base`, `neutral`, `brand`, `brand-outline`, `border`, `border-filled`, `border-inverse`, `bare`, `bare-inverse`, `inverse`, `container`, `success`, `destructive`, or `destructive-text`. Choose one that suits the importance of the action and the design language of the page.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FHxGDvstEp4whipGzxnuY%2Fax-button-variant.png?alt=media" alt=""><figcaption><p>Eleven of the fourteen variants, on a light page. The three inverse variants are drawn for a dark background and are not shown here: on white, Bare Inverse has no visible text and Border Inverse is an empty outline.</p></figcaption></figure>

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

**Stretch** expands the button to fill the full width of its container — use it for prominent CTAs or to match the width of form fields above it.

**Disabled** prevents users from clicking the button. Use it when an action isn't available yet, such as a "Submit" button awaiting required fields.

**Title** sets tooltip text shown when hovering over the button, and **Alternative Text** provides accessible text describing the button when it shows only an icon.

**CMS Document Download** and **Document URL or Expression Download** make the button download a file when clicked — reference a CMS document or provide a direct URL instead of triggering an interaction.

## Interactions

The **Link To** setting determines what happens when users click the button, and it offers seven action types. Choose the one that matches what you want to accomplish. Two of them read slightly longer in the panel than in the headings below: **Show Toast Notification** and **Open Confirm Dialog**.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-fce8b6da22bc7fa9e8724be171e44a69d9a706e1%2F2023-12-30_11-30-24.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

### [Show Toast](/experience-cloud/properties-panel/interactions/show-toast.md)

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](/experience-cloud/properties-panel/interactions/navigate.md)

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](/experience-cloud/properties-panel/interactions/open-alert-modal.md)

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](/experience-cloud/properties-panel/interactions/open-confirm.md)

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](/experience-cloud/properties-panel/interactions/open-flow-dialog.md)

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

### [Download](/experience-cloud/properties-panel/interactions/download.md)

Downloads a file when the button is clicked, from a Salesforce file, a public link, or a URL.

When to use it: Price lists, statements, contracts, or any document a portal user needs to keep. Prefer it to the **CMS Document Download** setting when the file is decided by the interaction rather than fixed on the button.

### Refresh All Queries

Re-runs every query on the page, so the components around the button show current data.

When to use it: After a flow dialog or a modal has changed a record, to bring the rest of the page up to date without asking the user to reload.

## Styling

Customize the button's appearance from the **Style** section of the property editor.

{% tabs %}
{% tab title="Spacing" %}
Controls the space around the button in each direction (top, bottom, left, right). Use these to precisely position your buttons, avoiding overlap with other elements and creating breathing room.
{% endtab %}

{% tab title="Label/Icon" %}

* **Color:** The default color of the button's text or icon.
* **Color Active:** The color the text/icon changes to when the button is clicked or tapped.
* **Color Hover:** The color the text/icon changes to when the user hovers their mouse over the button.
* **Font Family:** Specifies the typeface used for the button's text label. Ensure it aligns with your site's overall design and is easy to read.
* **Font Size:** Controls the size of the label's text. Adjust for readability and emphasis as needed.
* **Font Style:** Sets the style of the text, such as normal, italic, or oblique. Use sparingly for special emphasis.
* **Font Weight:** Dictates the boldness of the text. Consider using different weights to differentiate primary and secondary buttons.
  {% endtab %}

{% tab title="Background" %}

* **Background Color:** The default color of the button's background.
* **Background Color Active:** The button's background color when clicked or tapped.
* **Background Color Hover:** The background color when the user hovers their mouse over the button.
  {% endtab %}

{% tab title="Border" %}

* **Border Color:** The color of the button's border.
* **Border Color Active:** The border color when the button is active.
* **Border Color Hover:** The border color when the user hovers their mouse over the button.
* **Border Size:** The thickness of the border (in pixels).
* **Border Style:** The type of border: solid, dotted, dashed, etc.
* **Border Radius:** Controls how rounded the button's corners are. Higher values lead to softer, rounder buttons
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-button.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.