Button dropdown

A row of actions that stays flat while it's short and collapses behind a ⋮ menu once it isn't. <mono-button-dropdown :buttons.prop="actions" :min="1"> — button plus dropdown in one element.

import 'mono-helper/ui/button-dropdown'

const actions = [
  { label: 'Save', icon: 'i-mdi-content-save', color: 'primary', onClick: save },
  { label: 'Delete', icon: 'i-mdi-delete', color: 'danger', variant: 'outline', onClick: remove },
]

<mono-button-dropdown :buttons.prop="actions" :min="1" />

buttons and trigger are objects, so bind them with .prop — a plain attribute would only carry a stringified value.

How min decides

min is how many entries may render inline. It's all-or-nothing: while buttons.length <= min every entry is a plain button; past that they all move into the dropdown and only the trigger is left.

min	buttons	renders
1	1	that button, directly
1	3	⋮ → the three in a menu
3	3	all three inline

Entries are real buttons

Each entry is rendered as an actual <mono-button>, so every button prop keeps working — variant, color, size, disabled, badge, icon-position, and the behavioural ones like loading, throttle / debounce and handler. Nothing is re-implemented, so a prop added to the button later works here for free.

On top of ButtonProps, an entry takes label, icon and onClick.

Entries look different inside the menu

A dropdown of solid, outlined and tonal buttons in assorted colours reads as noise rather than a list. So inside the menu every row is the same flat, square, borderless strip, and an entry’s own color is expressed by its icon alone — no rounded corners and no press "twitch". The moment the list is short enough to render inline, each entry goes back to its real button styling: gradient fills, outlines, radius, press effect and all.

The ⋮ trigger is styled separately, with color / variant / size on the element itself.

Props

Prop	Purpose
buttons	The actions. Each entry takes every <mono-button> prop plus label / icon / onClick. Bind with .prop.
min	How many entries may render inline (default 1).
color / variant / size	Style the ⋮ trigger. Entries are NOT colored inside the menu — see below.
trigger	ButtonProps for the ⋮ button — size, variant, a different icon, or a label to make it a normal labelled button.
placement	Where the panel opens (default bottom-end).
offset	Gap in px between trigger and panel (default 4).
model-value	Open state. Listen for mno-open / mno-close to mirror it.
close-on-select	Close when an entry is clicked (default true).
close-on-outside-click / close-on-escape	Both default true.
disabled	Disables the trigger and every entry.

mno-click fires with { item, index, collapsed } in addition to the entry's own onClick, so you can handle actions per-item or centrally.

Keyboard

↑ / ↓ move between menu rows, Enter activates, Esc closes and returns focus to the trigger.

Both demos also run under Vue + Shadow DOM — same behaviour, icons included.

Types

Importimport { ButtonDropdownProps } from 'mono-helper'

Prop	Value	Default	Description
buttons	ButtonDropdownItem[]	—	The actions. Each entry takes every `<mono-button>` prop.
min	number	—	How many entries may render inline. While `buttons.length <= min` they are all shown as plain buttons; past that, ALL of them move into the dropdown and only the trigger remains. Default `1`.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'dark' | 'light'	—	Colors the `⋮` trigger. Entries are deliberately NOT colored inside the menu — an entry's own `color` tints its ICON there instead, since a list of differently-coloured buttons reads as noise. Outside the menu (inline, when the list is short enough) entries keep their real button styling.
variant	'solid' | 'outline' | 'tonal' | 'gradient'	—	Visual style of the `⋮` trigger — same values `<mono-button>` takes.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Size of the `⋮` trigger.
placement	'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'	—	Where the panel opens relative to the trigger. Default `'bottom-end'`.
offset	number	—	Gap in px between trigger and panel. Default `4`.
trigger	ButtonProps & { label?: string | undefined; icon?: string | undefined; }	—	Props for the `⋮` trigger button — same shape as an entry, minus the click.
modelValue	boolean	—	Open state. Two-way is opt-in: listen for `mno-open` / `mno-close`.
disabled	boolean	—	Disables the trigger and every entry.
closeOnSelect	boolean	—	Close when a menu entry is clicked. Default `true`.
closeOnOutsideClick	boolean	—	—
closeOnEscape	boolean	—	—
cssClass	ButtonDropdownCssClass	—	—
cssClassName	string	—	—