The first example of the Pattern page, live.

Overview

The <mds-zero> web component is the empty-state (zero-data) panel of the Magma Design System: a centered, vertically stacked layout that pairs an illustration, explanatory copy, and a call-to-action to guide users when a list, search, or section has no content to show. It is a pure structural container with no props - composition happens entirely through its slots.

Semantic Behavior

Three-zone layout: The host stacks its content vertically and centered - the default slot (the visual) on top, the content zone in the middle, and the action zone in a footer at the bottom.Default slot is the visual: The unnamed default slot holds the illustration or image; it is meant for an mds-img/img, not text.Content zone is centered text: The content slot is centered and constrained by a max-width, so headings and descriptions read as a focused message block.Action zone auto-centers children: Elements placed in slot="action" are horizontally centered within the footer, so a single primary button sits centered by default.Themed surface: The host renders a neutral rounded surface that picks up theme, contrast, and reduced-motion preferences.

Properties & Visual Configurations

<mds-zero> exposes no props; all configuration is done through slot composition and one CSS custom property. content vs. action slots: Put the message (title + description, typically mds-text) in slot="content", and the recovery action (typically a single mds-button) in slot="action". Use the default slot only for the illustration.--mds-zero-contents-max-width: Caps the width of the centered text block (default 400px) so long descriptions wrap into a balanced column rather than spanning the full panel. The contents and actions shadow parts expose the two wrapper zones for consumers that need to override their layout from outside the shadow boundary.