Push notification<mds-push-notification>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
behaviorenumSpecifies if the component is visible or not. behavior = manual should hide when click outside should hide when all notifications are removed should show when change visible from component or call show method behavior = auto should hide when all notifications are removed should show when one or more notifications are added
visiblevisiblebooleanSpecifies if the component is visible or not.
Overview
The <mds-push-notification> web component is the Magma Design System container that hosts and orchestrates a stack of transient notification items, managing their show/hide lifecycle, entry/exit animations, and overall visibility. It is a compound parent: its default slot holds mds-push-notification-item children, and it has no direct HTML primitive equivalent.
Semantic Behavior
Slot-driven lifecycle: Items placed in the default slot are animated in automatically; each item animates out and is removed when closed (an item shows its close button only with deletable).Built-in clear button: The container always renders its own Cancella notifiche button, which animates out every item and hides the container.Auto vs. manual behavior: With behavior="auto" the container shows itself as soon as one or more items are added; with behavior="manual" visibility is driven only by the visible prop or the imperative methods.Empty-stack auto-hide: When the last remaining item animates out, the container hides itself regardless of behavior. The check counts every node in the slot, whitespace text included, so it fires only when the items are the slot’s only nodes (as when they are appended from script); the clear button and hide() always hide it.Emitted events: mdsPushNotificationShow fires when it becomes visible, mdsPushNotificationHide when hidden, and mdsPushNotificationChange on every transition carrying a { visible: boolean } detail.Imperative API: Exposes show() and hide() methods to control visibility programmatically, plus removeNotification() to dismiss one or an array of mds-push-notification-item elements with the standard outro animation.Animation timing: Intro/outro durations and inter-item gap are read from CSS custom properties (--mds-push-notification-items-intro-delay, --mds-push-notification-items-outro-delay, --mds-push-notification-items-gap), so motion is themeable without code changes.
Properties & Visual Configurations
The container intentionally exposes a minimal prop surface; most configuration is structural (which items you slot in) or stylistic (via CSS custom properties).
Other behavioral props
behavior selects the visibility strategy: pick 'auto' (default) when the stack should appear and disappear purely as a function of how many items it contains, and 'manual' when you want explicit control over when the container is shown via visible or the show()/hide() methods.visible is the controlled visibility flag; set it to drive the container open or closed, while reading it returns the current visibility.