Correct and idiomatic ways to use the <mds-mention> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md.

Basic Inline Mention

The canonical form. Provide label with the user handle or display name. The component renders the default @ glyph; the mention is read-only until deletable is set.

<mds-text>
  Ciao <mds-mention label="mario.rossi"></mds-mention>, sei riuscito a inviare il messaggio?
</mds-text>

Removable Mention

Set deletable to show the remove button, then listen for mdsMentionDelete on the element. The event carries the mention that was dismissed, so one handler can serve a whole list.

<mds-mention id="m1" label="mario.rossi" deletable></mds-mention>
<script>
  document.querySelector('#m1').addEventListener('mdsMentionDelete', ({ detail }) => {
    detail.element.remove();
  });
</script>

Custom Icon

Override the default @ glyph with any Magma icon slug via the icon prop. Use this when the mention refers to a team, group, or entity that has a dedicated icon.

<mds-mention label="team-design" icon="mi/baseline/group"></mds-mention>

Sizing

Use the size prop to match the mention’s visual weight to its context. sm is the default for dense inline use; md scales up the icon and typography; lg uses headline-weight typography for prominent placements.

<!-- Dense list or comment thread -->
<mds-mention label="anna.verdi" size="sm"></mds-mention>

<!-- Standard body text -->
<mds-mention label="anna.verdi" size="md"></mds-mention>

<!-- Heading-adjacent or featured mention -->
<mds-mention label="anna.verdi" size="lg"></mds-mention>

Mention Inside a Comment or Message

Place <mds-mention> inline within <mds-text> to embed it naturally in body copy, preserving vertical alignment.

<mds-text>
  Il documento e' stato approvato da
  <mds-mention label="lucia.ferrari" icon="mi/baseline/person"></mds-mention>
  e sara' pubblicato domani.
</mds-text>

Multiple Mentions in One Sentence

Drop several <mds-mention> tokens in the same text flow. Each is a self-contained pill; they line-wrap independently.

<mds-text>
  <mds-mention label="marco.bianchi"></mds-mention> e
  <mds-mention label="giulia.conti"></mds-mention>
  sono stati assegnati alla revisione.
</mds-text>

Styling Customization

Adjust the icon size through the documented --mds-mention-icon-size CSS custom property. Set it on the host element or a parent selector; use Magma spacing tokens to stay on the design grid.

.featured-comment mds-mention {
  --mds-mention-icon-size: calc(var(--spacing) * 700);
}