Common incorrect uses of <mds-chip>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Use a Clickable Chip Without clickable or selectable

Without clickable, the chip has no role, no focus management, and no keyboard activation. Listening for click events on a static chip is a silent accessibility failure.

<!-- INCORRECT -->
<mds-chip label="Apri" variant="primary" onclick="doSomething()"></mds-chip>

<!-- CORRECT -->
<mds-chip label="Apri" clickable variant="primary"></mds-chip>
<script>
  document.querySelector('mds-chip').addEventListener('mdsChipClickLabel', doSomething);
</script>

Do Not Use selected Without selectable

selected only has visual and semantic meaning when selectable is also set. On a non-selectable chip the attribute renders the selected style but the selection can never be toggled and no event fires, misleading users.

<!-- INCORRECT -->
<mds-chip label="Attivo" selected variant="success"></mds-chip>

<!-- CORRECT -->
<mds-chip label="Attivo" selectable selected variant="success"></mds-chip>

Do Not Apply tone Values Outside the Minimal Ladder

mds-chip accepts only ToneMinimalVariantType: strong and weak. Passing outline, text, or box is invalid: no style matches it, so the chip silently loses its variant colors.

<!-- INCORRECT -->
<mds-chip label="Categoria" tone="outline" variant="primary"></mds-chip>
<mds-chip label="Categoria" tone="text" variant="primary"></mds-chip>

<!-- CORRECT -->
<mds-chip label="Categoria" tone="weak" variant="primary"></mds-chip>
<mds-chip label="Categoria" tone="strong" variant="primary"></mds-chip>

Do Not Slot Content Into the Chip

<mds-chip> has no default or named slots - all content is driven by props (label, icon, deletable). Slotting HTML children is ignored by the Shadow DOM.

<!-- INCORRECT -->
<mds-chip>
  <span>Etichetta</span>
  <mds-icon name="mi/baseline/close"></mds-icon>
</mds-chip>

<!-- CORRECT -->
<mds-chip
  label="Etichetta"
  icon="mi/baseline/pets"
  deletable
  variant="primary"
></mds-chip>

Do Not Pierce Shadow DOM to Style the Delete Button

The inner mds-button used for the delete affordance is a Shadow DOM implementation detail with no styling API of its own: targeting it with >>> or undocumented ::part() names will break on minor releases. Restyle the chip and its leading icon through the documented --mds-chip-* properties.

/* INCORRECT */
mds-chip >>> .button-delete {
  color: red;
}

/* CORRECT */
mds-chip {
  --mds-chip-icon-color: rgb(var(--magma-danger-fg));
  --mds-chip-icon-background: rgb(var(--magma-danger-wash-base));
}

Do Not Forget to Remove await-Pattern Analogue: Removing selected by Setting It to false

With selected="false" the component reads the prop as false and drops the attribute when it renders, but until then the attribute is in the DOM and attribute selectors (mds-chip[selected]) match it. Remove the attribute; from JavaScript both false and undefined deselect the chip (the component turns false into undefined and drops the attribute).

<!-- INCORRECT -->
<mds-chip label="Filtro" selectable selected="false" variant="primary"></mds-chip>

<!-- CORRECT -->
<mds-chip label="Filtro" selectable variant="primary"></mds-chip>

Do Not Use <mds-chip> as a Navigation Link

<mds-chip> has no href prop. Wrapping it in an <a> creates a nested interactive element, breaks keyboard semantics, and fails accessibility audits. Use mds-button with href instead.

<!-- INCORRECT -->
<a href="/categoria/sport">
  <mds-chip label="Sport" variant="primary"></mds-chip>
</a>

<!-- CORRECT -->
<mds-button
  label="Sport"
  href="/categoria/sport"
  variant="primary"
  tone="weak"
></mds-button>