Button Menu

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

Tutorials

Name
Description
Illustration

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

Changing the Properties

Use menu-items to specify the menu items for the button menu. menu-itemswill 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.

Important

Styling the Button Menu

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

Examples

Setting
Value

Menu Items

Item 1 / Item 2

Label

My Button Menu

Icon Size

Medium

Menu Alignment

Left

Specifications

Name
Type
Description

alternativeText

String

The assistive text for the button menu.

disabled

Boolean

If present, the menu can't be opened by users.

draftAlternativeText

String

Describes the reason for showing the draft indicator. This is required when is-draft is true.

hideDownArrow

Boolean

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.

iconName

String

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.

iconSize

String

The size of the icon. Options include xx-small, x-small, small, or medium.

isDraft

Boolean

If present, the menu trigger shows a draft indicator.

items

ButtonMenuItem

To specify the menu items for the button menu.

label

String

Optional text to be shown on the button.

menuAlignment

String

Determines the alignment of the menu relative to the button. Available options are: auto, left, center, right, bottom-left, bottom-center, bottom-right. The auto option aligns the dropdown menu based on available space.

nubbin

Boolean

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.

title

String

Displays title text when the mouse moves over the button menu.

tooltip

String

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.

value

String

The value for the button element. This value is optional and can be used when submitting a form.

variant

String

The variant changes the look of the button. Accepted variants include brand, bare, container, border, border-filled, bare-inverse, and border-inverse.

Last updated

Was this helpful?