Button Menu generator
Row-level actions (Edit / Clone / Delete) on list views and related lists are almost always a lightning-button-menu. Style the trigger and dropdown panel so it matches your button system while staying visually lightweight.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-button-menu
alternative-text="Actions"
label="Actions"
class="studio-menu"
onselect={handleSelect}
>
<lightning-menu-item value="item1" label="Edit"></lightning-menu-item>
<lightning-menu-item value="item2" label="Clone"></lightning-menu-item>
<lightning-menu-divider></lightning-menu-divider>
<lightning-menu-item value="item3" label="Delete"></lightning-menu-item>
</lightning-button-menu>
</template>Design tips for button menus
- Order menu items by frequency of use, with destructive actions (Delete) grouped at the bottom.
- Keep the trigger visually quieter than primary buttons — menus are usually secondary actions.
- Use icons only if every item has one; a mix of icon and no-icon items looks unfinished.
Related components
Components developers commonly compare against or pair with Button Menu.