Usage<mds-usage>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à
variantenumSpecifies the guidance category of the content, which drives colors, header label and icon
aliasstringSpecifies the alias of the usage phrase on the top of the component
iconstringSpecifies the icon displayed in the header; when not set or empty, the icon follows the variant
Panoramica
The <mds-usage> web component is a documentation-oriented annotation block of the Magma Design System used to frame example content as a recommendation, a warning, or an informational note. It wraps slotted content in a labelled, status-colored container and has no native HTML primitive equivalent - it is a presentational guidance device, typically used inside design-system docs and Storybook.
Semantic Behavior
Status semantics via variant: The chosen variant drives the border and header color from the shared status palette (success / info / error / warning) and the header icon (a tick for do, an X for dont, an info sign for info, a warning triangle for warn), so the container reads as the matching guidance category even without its color.Content role mapping: The content region conveys an allowed-vs-disallowed nature to assistive technology - insertion for the 'do' and 'info' variants, deletion for 'dont' and 'warn'.Localized header label: When alias is not provided, the header text is resolved from the bundled locale dictionary (el / en / es / it) keyed by variant, so the label follows the document language.Default slot is content: The default (unnamed) slot accepts a text string, HTML elements, or other components - it is the body of the usage block, not the label.
Properties & Visual Configurations
variant is the primary configuration prop. Unlike most Magma components, this is NOT the shared variant/tone ladder defined in agents/variants.md; it is a component-specific guidance category:variant="do": marks recommended / allowed usage (success styling, insertion role).variant="dont": marks discouraged / disallowed usage (error styling, deletion role).variant="info": neutral informational note (info styling, insertion role); this is the default.variant="warn": cautionary note (warning styling, deletion role).
Other behavioral props
alias overrides the auto-generated, localized header phrase with a custom string when the default category label is not specific enough for the example being shown.icon replaces the header icon of the variant with any icon slug; colors, label and content role still follow the variant. When not set or empty, the icon follows the variant. The header icon is decorative: the label carries the meaning.