# Button

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FAHozMxgsuz6haSjpfV6X%2Fimage%20(79).avif?alt=media&#x26;token=6314c90c-ca2e-442d-91fc-0b79df45a75b" alt="" width="375"><figcaption></figcaption></figure>

## Tutorials

| Name                                                                                                                                                   | Description                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| [**Customize the flow navigation buttons**](https://docs.avonnicomponents.com/flow/tutorials/components/button/customizing-flow-navigation-buttons)    | Learn to create and display product code barcodes in Salesforce efficiently and effectively. |
| [**How to add a "Cancel and Close" Button**](https://docs.avonnicomponents.com/flow/tutorials/components/button/how-to-add-a-cancel-and-close-button)  | Learn to add a 'Cancel and Close' button in Salesforce screen flows with Avonni Button.      |
| [**Adding a Button to Launch Flows in Salesforce**](https://docs.avonnicomponents.com/flow/tutorials/components/button/how-to-open-flows-from-buttons) | 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](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel).

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**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/)**, 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 %} |                                                                            |