Badge<mds-badge>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
typographyenumSpecifies the typography of the element
variantenumSets the theme variant colors
labelstringThe label of the badge
Panoramica
The <mds-badge> web component is the Magma Design System’s compact status and label indicator, used to attach a short categorical signal (count, state, tag) to other content. It is purely presentational and has no HTML primitive equivalent.
Semantic Behavior
Text-only content: The badge is meant to carry a short text string, not markup; the label prop is the supported source of that text.Deprecated default slot: Slotted text is still read as a legacy fallback, but only when label is empty - once label is set it always wins. HTML elements or components in the slot are unsupported.No interactivity: The component emits no events, has no form association, no focus management, and no disabled/active state - it is a static visual marker.
Properties & Visual Configurations
The shared variant / tone ladders are defined in agents/variants.md; <mds-badge> consumes them directly and does not add any component-specific values. The default appearance is variant="green" with tone="weak".tone selects the chrome treatment: 'weak' for a subtle tinted fill (the default, best for dense lists and tables), 'strong' for a saturated high-emphasis fill, and 'outline' for a bordered, transparent-fill badge that reads as the lightest emphasis.
Other behavioral props
typography chooses the internal text scale - 'option' (default, the smaller one) or 'label' - to align the badge’s text size with the surrounding context (e.g. inside a denser table cell vs. a standalone label).