Banner<mds-banner>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à
toneenumSets the tone of the color variant
variantenumSets the theme variant colors
deletabledeletablebooleanShows the cross icon to perform cancel/delete action on element
hideCockadehideCockadebooleanHides the decoration around the banner icon
headlinestringThe title on the top of the banner
iconstringAn icon displayed at the top left of the banner
Panoramica
The <mds-banner> web component is the Magma Design System surface for contextual, in-page messages - informational notices, status callouts, and alerts - pairing an optional icon, headline, body text, and inline actions inside a single themed box.
Semantic Behavior
Variant-driven ARIA: The announcement role is derived from variant, not set manually. error and warning announce assertively (role="alert"); ai, info, primary, and success announce politely (role="status"); light and dark are decorative and silent.Headline as label: When headline is set it also becomes the banner’s accessible label.Dismissal: When deletable is true a close button is rendered; activating it emits mdsBannerClose and, if the banner sits inside an mds-modal, closes that modal.Localized close button: The close button title is localized (el/en/es/it) from the host language.Action slot: The action region is rendered only when a direct [slot="action"] child is present, so banners without actions produce no empty container.
Properties & Visual Configurations
This component uses the shared variant / tone ladders defined in agents/variants.md; pick the variant according to the message’s semantic weight, since it also governs the ARIA behavior described above. tone is limited to the minimal-box set ('weak', 'strong', 'box'), defaulting to 'weak'.
Other behavioral props
hideCockade (default false) removes the colored decorative badge wrapping the leading icon; set it for a flatter icon presentation.icon is a Magma icon library slug shown at the top-left, surfaced as decorative.deletable opts the banner into being dismissible - choose it for transient or user-acknowledged messages rather than persistent context.The default slot carries the body text/markup; the action slot holds inline controls, with mds-button the recommended element.