The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.

Props

lgmdsmxlsizeenumSpecifies the size for the button

blankselftargetenumSpecifies the target of the URL, if self or blank

strongweaktoneenumSpecifies the tone variant for the button

allnonewordtruncateenumSpecifies if the text shoud be truncated or should behave as a normal text

abuttonresetsubmittypeenumThe type of the primary action: with 'submit' or 'reset' it submits or resets the form the component is in, the chevron never does. Unlike mds-button it defaults to 'button'

aidarkerrorinfolightprimarysecondarysuccesswarningvariantenumSpecifies the color variant for the button

activeactivebooleanSpecifies if the button is active or not

autoFocusautoFocusbooleanSpecifies if the component is focused when is loaded on the viewport

awaitawaitbooleanSpecifies if the button is awaiting for a response

disableddisabledbooleanSpecifies if the component is disabled or not

hrefstringSpecifies the URL target of the button

mi/baseline/addmi/baseline/badgemi/baseline/checkmi/baseline/check-circlemi/baseline/deletemi/baseline/donemi/baseline/downloadmi/baseline/editmi/baseline/emailmi/baseline/homemi/baseline/infomi/baseline/location-onmi/baseline/notificationsmi/baseline/paymentmi/baseline/personmi/baseline/searchmi/baseline/sendmi/baseline/settingsmi/baseline/sharemi/baseline/starmi/baseline/warningiconstringThe icon displayed in the button

labelstringSpecifies le text label of the component

namestringThe name sent with value to the form the primary action submits, as a native submit button does

valuestringThe value sent under name to the form the primary action submits

Overview

The <mds-button-dropdown> web component is a split-button control of the Magma Design System: it pairs a primary <mds-button> action with a secondary chevron button that opens an attached <mds-dropdown>, giving users a default action plus a menu of related choices in a single, visually unified control.

Semantic Behavior

Default slot is the menu: Whatever you place in the default slot becomes the dropdown panel content; it is not treated as the button label (the visible label comes from the label prop).Chevron trigger: The second button is icon-only (chevron), named in the page language (the lang of <html>) (“More actions”), and toggles the dropdown; it carries aria-haspopup and aria-expanded for the menu it opens.Shared configuration: active, autoFocus, await, disabled, href, target, size, tone and variant are forwarded identically to both internal buttons, so the two halves always stay visually and behaviorally in sync.Form association: The host is form-associated. With type="submit" the primary action submits the enclosing <form> (or the one its form attribute names) and sends name=value, like a native submit button; with type="reset" it resets it. The chevron never submits. Unlike <mds-button>, type defaults to 'button': a dropdown in a form submits it only when asked. The menu items are slotted <mds-button>, so they follow their own type (default 'submit'), name and value, and the receiver tells all the actions apart by name.Disabled / await states: Because these flags pass through to both buttons, disabling or putting the control in an awaiting state affects the action and the trigger together. A disabled <fieldset> around the component disables both halves the same way, without setting disabled.Primary action event: mdsButtonDropdownClick fires when the primary action is clicked or activated from the keyboard, and not while the component is disabled or awaiting. The chevron and the menu items do not fire it. A native click listener on the component also runs for the menu items, whose clicks bubble to it, so listen for mdsButtonDropdownClick to run the primary action in JavaScript.Dropdown part: The internal dropdown is exposed as the dropdown shadow part for external styling of the menu surface.

Properties & Visual Configurations

The shared variant / tone / size ladders are defined in agents/variants.md; they apply here as in <mds-button>, narrowed to tone strong / weak and without the google / apple variants, and are forwarded to both internal buttons. variant defaults to 'primary', tone defaults to 'strong', and size defaults to 'md'. label sets the text of the primary action button only; the chevron trigger is icon-only.type (default 'button'), name and value apply to the primary action only, as described under Form association. The menu items follow their own type: inside a <form>, give type="button" to the ones that must not submit it.href makes a click navigate instead of submitting, with target choosing 'self' vs 'blank'; it is forwarded to the chevron too, which then navigates as well as opening the menu.

Other behavioral props

icon is an SVG filename slug from the Magma icon library, applied to the primary action button (the chevron icon on the trigger is fixed and not configurable).truncate is declared (default 'word') but not forwarded to the internal buttons: the primary label always truncates as 'word'.

Dependencies

Uses: mds-button, mds-dropdown