Badge<mds-badge>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
toneenumSets the tone of the color variant
typographyenumSpecifies the typography of the element
variantenumSets the theme variant colors
labelstringThe label of the badge
Overview
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).