> 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/flow/flow-components/button.md).

# Button

## Overview

<figure><img src="/files/QZHDeeCmWWVbYyU6XTzy" alt="" width="375"><figcaption></figcaption></figure>

The Avonni Button is an interactive control you place on a Flow screen to let users trigger actions — navigate to the next step, launch a sub-flow, open a modal, or fire any other interaction. It supports a wide range of visual styles, optional icons, full-width layout, disabled states, and a tooltip on hover.

## Tutorials

| Name                                                                                                                     | Description                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| [**Customize the flow navigation buttons**](/flow/tutorials/components/button/customizing-flow-navigation-buttons.md)    | Learn to create and display product code barcodes in Salesforce efficiently and effectively. |
| [**How to add a "Cancel and Close" Button**](/flow/tutorials/components/button/how-to-add-a-cancel-and-close-button.md)  | Learn to add a 'Cancel and Close' button in Salesforce screen flows with Avonni Button.      |
| [**Adding a Button to Launch Flows in Salesforce**](/flow/tutorials/components/button/how-to-open-flows-from-buttons.md) | Learn to create a button in Salesforce that opens a new flow with ease.                      |

***

## Configuration

To configure it, click the component on the Flow screen. The **Edit Button Component** panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Properties

**Label** sets the text displayed on the button. Leave it empty if you only want to show an icon.

**Variant** defines the button's visual style:

| Variant              | Description                                              | Suggested Use                                         |
| -------------------- | -------------------------------------------------------- | ----------------------------------------------------- |
| **Bare**             | Minimalist, no background or border.                     | Unobtrusive buttons, minimal visual distraction.      |
| **Base**             | Standard style with a background color.                  | Primary actions in forms or interfaces.               |
| **Bare-Inverse**     | Bare style with an inverse color scheme.                 | Dark backgrounds or themes.                           |
| **Border**           | Only a border without a filled background.               | Secondary actions, less emphasis.                     |
| **Border-Filled**    | Border with background fill.                             | Slightly more emphasis than border-only.              |
| **Border-Inverse**   | Border style with inverse colors.                        | Use on dark backgrounds.                              |
| **Brand**            | Styled with brand's colors.                              | Brand-representative actions.                         |
| **Brand Outline**    | Brand colors in an outline style.                        | Secondary brand-related actions.                      |
| **Container**        | Looks contained within a box.                            | Grouping related actions or section-specific buttons. |
| **Destructive**      | Indicates a dangerous or irreversible action, often red. | Delete, remove, or clear actions.                     |
| **Destructive-Text** | Text-only style for destructive actions.                 | Less prominent but critical actions.                  |
| **Inverse**          | For use on dark or vibrant backgrounds.                  | Stand out against a bold background.                  |
| **Neutral**          | Subdued and versatile.                                   | Non-emphasized or similar series of actions.          |
| **Success**          | Indicates a positive action, often green.                | Save, Confirm, or other successful operations.        |

**Icon Name** adds a Lightning Design System icon (e.g., `utility:add`) to the button. Use **Icon Src** instead to supply a custom image URL as the icon.

**Icon Position** places the icon to the **Left** or **Right** of the label.

**Icon Size** controls the icon's size: Extra Small, Small, Medium, or Large.

**Stretch** expands the button to fill the full width of its container.

**Disabled** makes the button visible but non-interactive. Use this to conditionally gray out the button based on flow state.

**Title** sets a tooltip shown when the user hovers over the button.

**Type** controls the HTML button type: **Button** (default), **Reset**, or **Submit**. In most flow scenarios, leave this as Button.

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Button. Configure them from the **Interactions** tab of the Edit Button panel.

### Click

Fires when the user clicks the button. Use this to navigate to the next step, launch a sub-flow, open a modal, or trigger any other action. The `clicked` output variable is set to `true` when this event fires.

## Styling

The **Style** tab gives you fine-grained control over the button's appearance, overriding the default variant styles. Configure it from the **Style** tab of the Edit Button panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the button, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side of the button.
  {% endtab %}

{% tab title="Spacing" %}
Controls the *inner* spacing between the button's content and its edges. These values are set per variant (Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, Success).

* **Block Start / Block End:** Adjust the vertical inner spacing.
* **Inline Start / Inline End:** Adjust the horizontal inner spacing.
  {% endtab %}

{% tab title="Text" %}
Styles the button's text label. The **Color** values are set per variant (Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, Success).

* **Color / Color Active / Color Hover:** Set the text color in the default, active, and hover states.
* **Font Size / Font Style / Font Weight / Font Family:** Control the label typography.
* **Line Height:** Set the height of the text line.
* **Horizontal Alignment:** Align the label within the button.
  {% endtab %}

{% tab title="Background" %}
Sets the button's background. These values are set per variant (Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, Success).

* **Color / Color Active / Color Hover:** Set the background color in the default, active, and hover states.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the button. The **Color** values are set per variant (Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, Success).

* **Color / Color Active / Color Hover:** Set the border color in the default, active, and hover states.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Box Shadow" %}
Attaches shadows to the button to add depth.

* **Shadow:** Set the button's default shadow.
* **Shadow Focus:** Set the shadow shown when the button is focused.
  {% endtab %}

{% tab title="Image" %}
Styles a custom image used as the button's icon (when **Icon Src** is set).

* **Border Color / Border Size / Border Style / Border Radius:** Customize the border around the image.
* **Object Fit:** Control how the image is resized to fit its box.
  {% endtab %}
  {% endtabs %}

## Output Variables

The Button exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Button component, and pick the output variable you need.

### Button Click

Set when the user clicks the button.

| Output variable | Type    | What it returns                              |
| --------------- | ------- | -------------------------------------------- |
| **Clicked**     | Boolean | `true` when the user has clicked the button. |

> **Example:** Use **Clicked** in a flow decision to branch logic — for instance, show a confirmation screen only after the user clicks a "Submit" button.

### Flow Interaction Output Variables

Like all interactive Flow components, the Button exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

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

```
GET https://docs.avonnicomponents.com/flow/flow-components/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.