Ctrlk
YouTube ChannelBook A Demo🪄 Build with AISubscribe for Updates
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Button Menu

The Avonni Button Menu component offers a compact way to access multiple related options through a clickable button.

The Avonni Button Menu displays a button that opens a dropdown of selectable menu items. Use it to surface multiple related options — navigation choices, record actions, or workflow branches — without cluttering the screen.

Tutorials

Name
Description
Illustration

How to change dynamically button menu icons

This Tutorial teaches how to change Avonni Button Menu icons based on user selections, improving interface responsiveness.

Overview

The Button Menu trigger can show a label, an icon, or both. When clicked, a dropdown appears with the configured menu items. The Select interaction fires when a user picks an item, carrying the selected item's name as an output variable.

An Avonni Button Menu with its dropdown open, showing four menu items with icons and a checkmark against the item named by the Value property

Example

Setting
Value

Menu Items

Item 1 / Item 2

Label

My Button Menu

Icon Size

Medium

Alignment

Left

Configuration

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

The Properties tab of the Button Menu property editor, with the Menu group open showing Alignment, Trigger, Hide Down Arrow, Nubbin, Value and Menu Items

Properties

Label — optional text shown on the button trigger alongside the icon.

Variant — controls the visual style of the trigger button: Bare, Bare-Inverse, Base, Border, Border-Filled, Border-Inverse, Brand, Brand-Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, or Success.

Icon Name — Lightning Design System icon for the trigger. If an icon other than utility:down or utility:chevrondown is used, a down-arrow is appended to the right (unless Hide Down Arrow is enabled). Specify in the format utility:settings.

Icon Size — controls how large the trigger icon appears: Xxs, Xs, Small, Medium, or Large. Default: Medium. Requires Icon Name to be set.

Icon Source — a custom image URL or Salesforce ContentDocumentId used as the trigger icon.

Disabled — when enabled, users cannot open the menu.

Title — tooltip text shown when hovering over the trigger button.

Menu

Alignment — position of the dropdown relative to the trigger: Auto, Left, Center, Right, Bottom Left, Bottom Center, or Bottom Right. Default: Left.

Trigger — which user action opens the menu: Click (default), Hover, or Focus.

Hide Down Arrow — when enabled, hides the additional down-arrow that normally appears next to a custom icon.

Nubbin — when enabled, shows a small pointer stub on the dropdown menu pointing back toward the button. Its position follows the Alignment setting.

An open Button Menu dropdown with Nubbin on, showing the small stub that points from the menu back to the button

Value — set this to the value of a menu item to display a checkmark next to it, indicating the current selection.

Menu Items — configure the list of items in the dropdown. For each item, set:

  • Label — the text shown in the menu.

  • Value — a unique identifier (required), used in the Select interaction to determine which item was picked.

  • Icon Name — an optional Lightning Design System icon shown on the menu item.

  • Is-Draft — when enabled, shows a draft indicator (a blue asterisk) on the left of the menu item.

  • Draft Alternative Text — describes the reason the draft indicator is shown.

  • URL — the address of the web page the menu item links to.

  • Target — where the link opens: Self (default), Blank, Parent, or Top. Requires a URL.

Advanced Options

Alternative Text — accessible text describing the button for screen readers.

Tooltip — text to display when the user mouses over or focuses on the button.

Is Draft — when enabled, the menu trigger shows a draft indicator.

Draft Alternative Text — describes the reason for showing the draft indicator. Required when Is Draft is enabled.

Disabled Menu Items — a list of menu item values that cannot be interacted with.

Interactions

Interactions define what happens when users interact with the Button Menu. Configure them from the Interactions tab of the Edit Button Menu panel.

Select

Fires when a user selects a menu item. The targetName output variable holds the value of the item that was picked, which you can use to branch the flow or trigger a downstream action.

Styling

The Style tab gives you control over the button menu's spacing, button colors, label typography, border, and image. Configure it from the Style tab of the button menu's property editor.

Controls the outer spacing around the button menu, creating space between it and other elements on the screen.

  • Top / Right / Bottom / Left: Adjust the space on each side of the button menu.

Controls the inner spacing between the button menu and its border.

  • Top / Right / Bottom / Left: Adjust the inner spacing on each side.

Adjusts display when opened as a modal dialog inside a Flow screen.

  • Width: Sets the dialog width.

  • Height: Sets the dialog height.

  • Background Color: Sets the dialog background color.

Controls the button's internal block and inline spacing (set per variant).

  • Block Start / Block End: Adjust the vertical spacing.

  • Inline Start / Inline End: Adjust the horizontal spacing.

Sets the button background (set per variant).

  • Color / Color Active / Color Hover: Set the background in each state.

Styles the button label and icon (colors set per variant).

  • Color / Color Active / Color Hover: Set the text and icon color in each state.

  • Font Size / Font Style / Font Weight / Font Family: Control the label typography.

Customizes the button border (colors set per variant).

  • Color / Color Active / Color Hover: Set the border color in each state.

  • Size: Adjust the border thickness.

  • Style: Choose a border style (e.g. solid, dashed, dotted).

  • Radius: Control the roundness of the corners.

Styles the image shown on the button.

  • Border Color / Border Size / Border Style / Border Radius: Customize the image border.

  • Image Object Fit: Control how the image fills its area.

Output Variables

The Button Menu 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 Menu component, and pick the output variable you need.

Item Selection

Updates when a user selects a menu item.

Output variable
Type
What it returns

Selected Menu Item Name

Text (String)

The value of the most recently selected menu item.

Example: A Button Menu offers three workflow actions — "Approve", "Reject", "Escalate". After the screen, check Selected Menu Item Name to branch the flow to the correct next step.

Flow Interaction Output Variables

Like all interactive Flow components, the Button Menu exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.

Last updated

Was this helpful?