Common incorrect uses of <mds-label>. 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 Rely on the Default Slot for Visible Text

The component’s render() method does not include a <slot> element, so content placed in the default slot is never rendered. Use the label prop exclusively.

<!-- INCORRECT -->
<mds-label>Stato documento</mds-label>

<!-- CORRECT -->
<mds-label label="Stato documento"></mds-label>

Do Not Use <mds-label> as a Form Input Label

<mds-label> is a standalone decorative tag for categories and statuses. It is not a replacement for <label> or for the label prop of mds-input-field, and it has no for / htmlFor association with form controls.

<!-- INCORRECT -->
<mds-label label="Nome utente"></mds-label>
<mds-input name="username"></mds-input>

<!-- CORRECT -->
<mds-input-field label="Nome utente">
  <mds-input name="username"></mds-input>
</mds-input-field>

Do Not Set deletable="false" as a String

deletable is a boolean prop, and a false boolean is an absent attribute (agents/conventions.md). The runtime parses the string "false" as false, but the prop is not reflected, so the attribute stays on the element and [deletable] selectors or any code that reads the markup see a deletable tag. Remove the attribute entirely to disable the affordance.

<!-- INCORRECT -->
<mds-label label="Tag" deletable="false"></mds-label>

<!-- CORRECT -->
<mds-label label="Tag"></mds-label>

Do Not Use a Status Variant for Decorative Tags

Status variants (error, warning, success, info) communicate system outcomes. Using them for neutral categories misleads users about the meaning of the label.

<!-- INCORRECT: "Fauna" is a category, not an error state -->
<mds-label label="Fauna" variant="error"></mds-label>

<!-- CORRECT: use a decorative palette color -->
<mds-label label="Fauna" variant="green"></mds-label>

Do Not Nest Interactive Elements Inside <mds-label>

The component renders no slot; placing buttons or links in the default slot position has no effect. For a deletable label use deletable and listen to mdsLabelDelete.

<!-- INCORRECT -->
<mds-label label="Categoria">
  <button onclick="remove()">x</button>
</mds-label>

<!-- CORRECT -->
<mds-label label="Categoria" deletable></mds-label>

Customize via Documented Vars, Not Internal Selectors

The supported customization surface is --mds-label-* CSS custom properties. Targeting shadow internals via ::part(), >>>, or undocumented class names couples your code to the Shadow DOM implementation and will break on minor releases.

/* INCORRECT */
mds-label >>> .text {
  font-weight: bold;
}

/* CORRECT */
mds-label {
  --mds-label-background: rgb(var(--label-blue-08));
  --mds-label-color: rgb(var(--label-blue-02));
}