Mention<mds-mention>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
sizeenumSets the label of the component
deletabledeletablebooleanShows the cross icon to perform cancel/delete action on element
iconstringSets the icon shown at the left of the label
labelstringSets the label of the component
Overview
The <mds-mention> web component renders a compact inline chip that references a person or entity - the kind of token produced when you type @name in an editor or comment field. It pairs an icon, a text label, and a removable action into a single self-contained pill.
Semantic Behavior
Props-only: It has no default slot and exposes its content exclusively through props.Default icon: When icon is not set the component falls back to the alternate-email (@) glyph, reinforcing the mention metaphor.Opt-in remove affordance: deletable adds a trailing remove button; its click emits mdsMentionDelete, and the component leaves the removal itself to the application.Size-driven typography: size maps to a fixed typography ramp (sm -> caption, md -> detail, lg -> h6); the label is wrapped in <b> at sm and md, and at lg it takes the bold h6 title style.
Properties & Visual Configurations
deletable turns on the trailing remove button. Without it the mention is a read-only token: no button, no event.icon is an SVG filename slug from the Magma icon library, shown at the left of the label; omit it to keep the default @ mention glyph.size controls both the physical scale and the typography of the label - pick sm for dense inline contexts, lg for prominent, headline-adjacent placements. The label is bold at every size (a <b> below lg, the h6 title style at lg).