Push notification item<mds-push-notification-item>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
previewenumSpecifies if the src attribute is used to show a the image as avatar or full image
toneenumSpecifies the color tone of the component
variantenumSpecifies the color variant of the component
deletabledeletablebooleanSpecifies if the component is dismissable; when set, a dismiss button is shown.
dateFormatstringSpecifies if the notification date format shows time passed or displays date as a static string
datetimestringSpecifies the notification date based on standard ISO 8601.
iconstringSpecifies the icon to be displayed
initialsstringThe user's inizials displayed if there's no image available, initials will override tone and variant senttings to keep user recognizable from others
messagestringSpecifies the message of the component
srcstringSpecifies the path to the image
subjectstringSpecifies the subject of the component
Overview
The <mds-push-notification-item> web component is a single notification card rendered inside its parent container <mds-push-notification>. It composes an avatar/image, a subject, a relative or formatted timestamp, a message body and an optional dismiss control into one toast-like row.
Semantic Behavior
Compound child only: It must be placed as a direct default-slot child of <mds-push-notification>; it is not used standalone or mixed with other child types, since the parent animates intro/outro and manages stacking.Dismiss reports up, removal happens in the parent: Clicking the built-in close button emits the bubbling mdsPushNotificationItemClose event; the parent runs the outro animation and removes the item. The item never removes itself.Parent-driven visibility lifecycle: When the last item closes, the parent auto-hides the whole notification area.Timestamp rendering: With dateFormat="timeago"datetime shows a localized relative time (“2 minutes ago”); otherwise the value is treated as a date-format string for a static date.Localization: The relative-time strings and the dismiss button title are localized (el/en/es/it).Conditional avatar vs. picture: An <mds-avatar> is rendered when icon is set or preview="avatar"; when src is set and preview is not avatar, an <mds-img> picture is rendered (next to the avatar when icon is also set).Slot detection: The badge and action named slot wrappers stay hidden (display: none) until matching slotted children exist, so empty slots take no space.
Properties & Visual Configurations
deletable (default false): Controls whether the dismiss button is shown. Add it to let the user close the notification manually; leave it off for items the user should not close.preview: Pick avatar to show the src image (or initials/icon fallback) as a compact round avatar, or image (default) to show src as a larger inline picture preview.initials: Provided as the avatar fallback when no image is available; it overrides tone/variant styling so the user stays visually recognizable.dateFormat: Use timeago for a live relative timestamp, or any date-format token string for a fixed display date.For tone and variant, this component consumes the shared color ladders defined in agents/variants.md; the values are forwarded to the underlying <mds-avatar> and follow the avatar tone/variant set rather than adding component-specific values.