Modal<mds-modal>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 the animation style of the modal window
interactionenumSpecifies if the component can be closed with close button, or also if the backdrop background is cliccked. If strict is selected only the close button can dismiss the component via UI. If relaxed is selected the component can be dismissed also by cliccking the backdrop area.
overflowenumSpecifies if the component prevents the body from scrolling when modal window is opened
positionenumSpecifies the animation position of the modal window
hideBackdrophideBackdropbooleanHides the modal backdrop
openedopenedbooleanSpecifies if the modal is opened or not
accessibleNamestringThe accessible name of the modal: the name a screen reader announces when the window opens. The <dialog> this component renders is the dialog, so the name goes there.
Overview
The <mds-modal> web component is the Magma Design System overlay container for dialogs, presenting content in a windowed surface layered above the page with an optional backdrop. It is the system equivalent of the native <dialog> element, adding managed open/close animations, body scroll locking, positioning, and a built-in close affordance.
Semantic Behavior
Open state: Visibility is driven by the opened prop. Setting it true runs the intro animation and emits mdsModalOpen; clearing it runs the outro animation and emits mdsModalClose.Programmatic close: Exposes an async close() method that dismisses the modal regardless of interaction, mirroring the close-button action.Show/hide events: mdsModalShow fires when the intro finishes (fully visible) and mdsModalHide when the outro finishes (fully hidden), the latter being the safe point to detach the modal to reclaim memory.Backdrop dismissal: With interaction="relaxed" (default) a click on the backdrop or Esc closes the modal; with interaction="strict" both are ignored and only the close button, close() or a touch swipe (below) can dismiss it.Body scroll lock: When overflow="auto" the component locks body scroll while open and restores it on close.Touch dismissal: On touch devices a horizontal swipe past a threshold closes the modal, respecting the swipe direction implied by edge position values.Slot-driven layout: With no window slot, the default slot renders centered content framed by optional top (header) and bottom (footer) slots, and a close button is rendered automatically, icon-only and named in the page language (the lang of <html>) (“Close”). Slotting a window element suppresses the built-in chrome and close button so the consumer supplies the entire surface.
Properties & Visual Configurations
This component does not use the shared variant / tone ladders; its configuration is structural and motion-oriented.
Other behavioral props
position sets where the window animates from and rests, from 'center' to edge and corner anchors ('top', 'bottom-left', etc.); edge positions also define the valid swipe-to-dismiss direction.animation selects the motion style of the window: 'slide' (default), '3d', or 'custom' (driven entirely by CSS custom properties).interaction governs how forgiving dismissal is - 'relaxed' allows backdrop clicks, 'strict' requires the close button.overflow chooses whether the component manages body scroll locking ('auto') or leaves it to the consumer ('manual').hideBackdrop removes the dimmed overlay behind the window (shown by default).