Button<mds-button>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
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
animationenumSpecifies if the text is animated when it is rendered
iconPositionenumSpecifies the horizontal position of the icon displayed in the button
sizeenumSpecifies the size for the button
targetenumSpecifies the target of the URL, if self or blank
toneenumSpecifies the tone variant for the button
truncateenumSpecifies if the text shoud be truncated or should behave as a normal text
typeenumThe type of the button element
variantenumSpecifies 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
hrefstringTurns the button into a link to this URL: a real anchor in its shadow root, so the browser gives it what it gives every link (new tab on a modifier or middle click, the context menu, drag). A client-side router takes the plain clicks over once registered with NavigationService.setHandler() (from @maggioli-design-system/magma/services); without one, a click listener on the host can still cancel the navigation with preventDefault().
iconstringThe icon displayed in the button
labelstringThe label of the button
namestringThe name sent with value to the form the button submits, as a native submit button does: buttons that submit the same form tell the receiver which one was chosen
valuestringThe value sent under name to the form the button submits
Overview
The <mds-button> web component is the primary interactive action control of the Magma Design System. It renders as a button, or as a link when href is set, handling form association, accessibility, loading state, and iconography natively.
Semantic Behavior
Button vs. link: Providing href renders a real anchor inside the component and gives the host role="link". The browser follows the link, so a modifier or middle click opens it in a new tab and the context menu offers the link actions; target="blank" opens a new tab on a plain click too. A click listener on the host cancels the navigation with preventDefault(), which is how a client-side router takes over. A click from the keyboard, a script or an assistive technology lands on the host and is followed the same way, unless cancelled.Form association: Inside a <form> the component submits (type="submit", default) or resets (type="reset") it like a native button, with no extra wiring; use type="button" to opt out. With name set, a submit sends name=value, so buttons that submit the same form tell the receiver which one was chosen. A custom element cannot be a submitter, so event.submitter is a hidden native button that stands in for the component: it carries the same name and value, but it is not the mds-button element.Active state: Mirrors a visual pressed state through the active attribute, safe to drive from CSS attribute selectors.Disabled state: Blocks pointer and keyboard activation and removes the host from the tab sequence. A disabled <fieldset> around the button disables it the same way, as it does a native button, without setting disabled.Await state: Renders an inline spinner, blocks pointer activation, and sets aria-busy="true" for assistive tech. Remove the attribute when done - do not set await="false".Accessibility: Sets role="button" on the host, role="link" when href is set, whatever the format of the icon; the label prop (or slotted text) is rendered as the button text, which names it. Without a label, an aria-label or a title, the component sets title from the last segment of the icon slug (mi/baseline/delete -> “delete”), which names the icon, not the action; an icon given as inline SVG or base64 has no slug, and leaves the button with no name at all: icon-only buttons need an explicit aria-label (or title), or an mds-tooltip with relation="label". A host with aria-labelledby gets no name from the slug, and loses the one it had when the attribute comes later, as it does from the tooltip.Sizing: The size prop drives padding, font size, and minimum hit area. Do not override dimensions with inline width / height.Linking constraint: target is effective only when href is set.
Component-specific variants and tones
The shared variant / tone ladders are defined in agents/variants.md. <mds-button> adds:variant="google" / variant="apple": brand-correct chrome for SSO entry points. Do not reuse them for non-SSO buttons.tone="box": the strong fill with an embossed, raised shadow (--shadow-box-solid-strong) and a brighter hover: more marked than strong, not less.
Other behavioral props
icon is an SVG filename slug from the Magma icon library; iconPosition places the glyph relative to the label (use right for forward-motion CTAs).truncate: word (default) keeps the label on one line and cuts it with an ellipsis, all clamps it with line-clamp (one line in the button), none lets it wrap onto more lines.animation: yugop progressively reveals characters; otherwise text renders immediately.