# Button

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

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

## Changing the Properties

The Variant attribute will define the appearance of the button.&#x20;

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

## Adding Interactions

Interactions define what will happen when users click on the button. You can find a list of interactions available [here](/flow/component-builder/interactions-panel.md).

Here are the available Actions for the Button Component:

* On **`Click`**&#x20;

{% hint style="danger" %}

## Important consideration

Due to limitations within Flow Builder, the Button component cannot directly access variable information from components that lack context about a specific record. When configuring interactions using record variables within a flow, ensure the components involved are contextually aware of the record. **For scenarios where context is challenging to establish, consider using the** [**Avonni Dynamic Components package**](/dynamic-components/welcome.md)**, which offers advanced capabilities for managing and passing record context across components.**
{% endhint %}

## Specifications

{% tabs %}
{% tab title="🎛️ Attributes" %}

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>iconName</td><td>String</td><td>The name of the icon to be used in the format 'utility:down'.</td></tr><tr><td>iconPosition</td><td>String</td><td>Describes the position of the icon.</td></tr><tr><td>label</td><td>String</td><td>Describes the totle of the button.</td></tr><tr><td>type</td><td>String</td><td>To specify the type of button</td></tr><tr><td>variant</td><td>String</td><td>The variant changes the appearance of the button.</td></tr></tbody></table>
{% endtab %}

{% tab title="Events" %}

| Name         | Description                                 |
| ------------ | ------------------------------------------- |
| click        | The event fired when the button is clicked. |
| {% endtab %} |                                             |

{% tab title="🎨 Styling" %}

#### Text

| Name         | Description                                              |
| ------------ | -------------------------------------------------------- |
| Line Height  | The line-height property specifies the height of a line. |
| Font Size    | Define the font size for the text label                  |
| Font Style   | Define the font style for the text label                 |
| Font Weight  | Define the font weight for the text label                |
| Color        | Define the font color for the text label                 |
| Color Hover  | Define the font color for the text label when hover      |
| Color Active | Define the font color for the text label when active     |

#### Background

| Name         | Description                                       |
| ------------ | ------------------------------------------------- |
| Color        | Define a button background color                  |
| Color Active | Define a button background color when active      |
| Color Hover  | Define a button background color when mouse hover |

#### Border

| Name         | Description                            |
| ------------ | -------------------------------------- |
| Size         | Define a border size                   |
| Radius       | Define a border radius                 |
| Style        | Define a border style                  |
| Color        | Define a border color                  |
| Color Active | Define a border color when active      |
| Color Hover  | Define a border color when mouse hover |

#### Box Shadow

| Name          | Description                                                                |
| ------------- | -------------------------------------------------------------------------- |
| Shadow        | Attach one or more shadows to a button.                                    |
| Shadow Focus  | Attach one or more shadows to a button when the user clicks on the button. |
| {% endtab %}  |                                                                            |
| {% endtabs %} |                                                                            |


---

# Agent Instructions: 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.