Toast<mds-toast>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
positionenumSets position of toast
toneenumSets the tone of the color variant
variantenumSets the theme variant colours
visiblevisiblebooleanSpecifies if toast is visible at the bottom or not
durationnumberIf set, specifies the visibility duration in milliseconds of the element inside the viewport, when the time is up the visible property will be set to false. If the duration is set to 0 the component will still visible until intentionally closed by user.
Panoramica
The <mds-toast> web component is the transient notification surface of the Magma Design System, used to surface brief, non-blocking feedback messages that appear over the viewport and auto-dismiss after a timeout. It has no native HTML equivalent and orchestrates its own visibility, positioning, and auto-close lifecycle.
Semantic Behavior
Auto-dismiss timer: When visible is true and duration is a positive number, an internal timer counts down and then sets visible back to false; setting duration to 0 (or falsy) keeps the toast on screen until it is closed intentionally.Close event: When the timer dismisses the toast, the component emits mdsToastClose after the outro animation - consumers should listen for this to remove the toast from the DOM or update queue state. Hiding it yourself (removing visible) emits nothing.Reactive timer: Showing the toast again (visible back to true) or changing duration at runtime restarts the countdown; hiding it does not stop a running timer.Conditional regions: The text region renders only when the host has inner content, and the action region is shown only while a [slot="action"] child is present, following the children added or removed later - empty slots produce no layout.Default-slot is text: The default slot is intended for a plain text string only; icons go in the icon slot and interactive controls in the action slot.
Properties & Visual Configurations
The shared variant / tone ladders are defined in agents/variants.md; <mds-toast> consumes the theme variant set and the minimal tone set ('strong' / 'weak') without adding component-specific values.
Other behavioral props
position anchors the toast to one of the six viewport corners/edges (top or bottom, left/center/right), driving both placement and the direction of the entry/exit animation; pick the edge that matches where users expect ephemeral feedback to surface.visible is the controlled on/off switch for the toast; toggling it drives the show/hide animation and the auto-dismiss timer rather than mounting or unmounting the element.duration is the visibility window in milliseconds before auto-dismiss; use a longer value for messages that carry an action the user must reach, and 0 for toasts that must stay until explicitly closed.
Slots
icon holds a leading glyph (recommended mds-icon); action holds interactive follow-ups (recommended mds-button) and, when present, renders inside a dedicated actions container.