Label<mds-label>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
truncateenumTruncates text inside the label or displays it in multiline if needed
typographyenumSpecifies the typography of the element
variantenumSets the theme variant colors
deletabledeletablebooleanEnables the cross icon to perform cancel/delete action on element
labelstringThe label of the component
Panoramica
The <mds-label> web component is the Magma Design System tag/chip used to display a short, non-interactive piece of text such as a status, a category, or a removable selection.
Semantic Behavior
Text content: The visible text comes from the label prop only; the component renders no <slot>, so content placed between the tags is not displayed.Deletable affordance: When deletable is set, the component renders a trailing close button and emits the mdsLabelDelete event on activation; the click is stopped at the close button, so it does not reach a surrounding clickable container.Keyboard interaction: While deletable, the close button can be triggered by keyboard as well as pointer.Localization: The close button’s title is localized (el/en/it; es currently gets the English string).
Properties & Visual Configurations
The variant and tone props follow the shared ladders defined in agents/variants.md; tone is limited to the minimal 'strong' / 'weak' set and defaults to 'weak'.
Component-specific variants and tones
variant accepts both the theme label palette (e.g. 'sky', the default) and the status palette ('error', 'warning', 'success', 'info'). Pick a status value when the label communicates an outcome or state; pick a theme color when it is a neutral category or decorative tag.
Other behavioral props
truncate controls overflow handling of the inner text: 'word' (default) keeps it on one line, 'all' wraps and clamps it to three lines with an ellipsis, and 'none' allows multiline wrapping.typography selects a compact type scale ('caption', 'detail', 'tip') appropriate to the label’s small footprint, defaulting to 'caption'.