# Button Menu

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

## Tutorials

| Name                                                                                                                                            | Description                                                                                                                | Illustration                     |
| ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| [**How to change dynamically button menu icons**](/flow/tutorials/components/button-menu/how-to-change-dynamically-avonni-button-menu-icons.md) | This Tutorial teaches how to change Avonni Button Menu icons based on user selections, improving interface responsiveness. | ![](/files/lr8BUGUae0CfVZJFRhkB) |

## Changing the Properties

Use `menu-items` to specify the menu items for the button menu. `menu-items`will be used to define interactions. Use `Variant` and `Icon Name` to define the appearance of the button menu element.

## Adding Interactions

Interactions define what will happen when users click on menu items. Here are the available Actions for the Button Menu Component:

* On **`Select`**

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

{% hint style="danger" %}

## Important

Due to limitations within Flow Builder, the Button Menu 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 %}

## Styling the Button Menu

You can customize Border Filled Background and Border Filled Foreground color on the Button Menu.

## Examples

<figure><img src="/files/q9dqGtbc6tRL4G35Om6A" alt="" width="144"><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Setting</th><th>Value</th></tr></thead><tbody><tr><td>Menu Items</td><td>Item 1 / Item 2</td></tr><tr><td>Label</td><td>My Button Menu</td></tr><tr><td>Icon Size</td><td>Medium</td></tr><tr><td>Menu Alignment</td><td>Left</td></tr></tbody></table>

## 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>alternativeText</td><td>String</td><td>The assistive text for the button menu.</td></tr><tr><td>disabled</td><td>Boolean</td><td>If present, the menu can't be opened by users.</td></tr><tr><td>draftAlternativeText</td><td>String</td><td>Describes the reason for showing the draft indicator. This is required when is-draft is true.</td></tr><tr><td>hideDownArrow</td><td>Boolean</td><td>If present, the small down arrow normaly displayed to the right of a custom icon is hidden. Without a custom icon-name this does nothing.</td></tr><tr><td>iconName</td><td>String</td><td>The name of the icon to be used in the format 'utility:down'. If an icon other than 'utility:down' or 'utility:chevrondown' is used, a utility:down icon is appended to the right of that icon.</td></tr><tr><td>iconSize</td><td>String</td><td>The size of the icon. Options include <code>xx-small</code>, <code>x-small</code>, <code>small</code>, or <code>medium</code>.</td></tr><tr><td>isDraft</td><td>Boolean</td><td>If present, the menu trigger shows a draft indicator.</td></tr><tr><td>items</td><td>ButtonMenuItem</td><td>To specify the menu items for the button menu.</td></tr><tr><td>label</td><td>String</td><td>Optional text to be shown on the button.</td></tr><tr><td>menuAlignment</td><td>String</td><td>Determines the alignment of the menu relative to the button. Available options are: <code>auto</code>, <code>left</code>, <code>center</code>, <code>right</code>, <code>bottom-left</code>, <code>bottom-center</code>, <code>bottom-right</code>. The auto option aligns the dropdown menu based on available space.</td></tr><tr><td>nubbin</td><td>Boolean</td><td>If present, a nubbin is present on the menu. A nubbin is a stub that protrudes from the menu item towards the button menu. The nubbin position is based on the menu-alignment.</td></tr><tr><td>title</td><td>String</td><td>Displays title text when the mouse moves over the button menu.</td></tr><tr><td>tooltip</td><td>String</td><td>Text to display when the user mouses over or focuses on the button. The tooltip is auto-positioned relative to the button and screen space.</td></tr><tr><td>value</td><td>String</td><td>The value for the button element. This value is optional and can be used when submitting a form.</td></tr><tr><td>variant</td><td>String</td><td>The variant changes the look of the button. Accepted variants include brand, bare, container, border, border-filled, bare-inverse, and border-inverse.</td></tr></tbody></table>
{% endtab %}

{% tab title="Events" %}

| Name         | Description                                   |
| ------------ | --------------------------------------------- |
| select       | The event fired when a menu item is selected. |
| {% endtab %} |                                               |

{% tab title="Styling" %}

#### Label

| Name        | Description                             |
| ----------- | --------------------------------------- |
| Font Size   | Define a font size for the label text   |
| Font Style  | Define a font style for the label text  |
| Font Weight | Define a font weight for the label text |

#### Background

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

#### Border

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

#### Text/Icon Color

| Name          | Description                                        |
| ------------- | -------------------------------------------------- |
| Color         | Define a color for the label text                  |
| Color Active  | Define a color for the label text when active      |
| Color Hover   | Define a color for the label text when mouse hover |
| {% 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-menu.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.