Common incorrect uses of <mds-status-bar>. 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 Set visible="false" to Hide the Bar

visible is a boolean prop. visible="false" leaves a visible attribute on the element that contradicts the hidden state, so attribute selectors and checks still read the bar as visible. Remove the attribute or call the hide() method instead.

<!-- INCORRECT -->
<mds-status-bar visible="false">
  <mds-button variant="primary" tone="strong">Salva</mds-button>
</mds-status-bar>

<!-- CORRECT - remove the attribute -->
<mds-status-bar>
  <mds-button variant="primary" tone="strong">Salva</mds-button>
</mds-status-bar>

<!-- CORRECT - or call the method -->
<script>
  document.querySelector('mds-status-bar').hide();
</script>

Do Not Put Plain Text in the Default Slot

The default slot is intended for interactive content (recommended: mds-button). Bare text nodes render but receive no layout treatment and produce inaccessible output. Use the description prop for contextual text.

<!-- INCORRECT -->
<mds-status-bar visible>
  Stai modificando 4 elementi
  <mds-button variant="primary" tone="strong">Salva</mds-button>
</mds-status-bar>

<!-- CORRECT -->
<mds-status-bar visible description="Stai modificando 4 elementi">
  <mds-button variant="primary" tone="strong">Salva</mds-button>
</mds-status-bar>

Do Not Use an Undocumented position Value

position accepts only 'bottom', 'bottom-left', or 'bottom-right'. An undocumented value (e.g. top, center) is passed unchecked to the inner <mds-modal>, which moves the window there, while the bar’s styling and slide-in animation assume the bottom edge.

<!-- INCORRECT -->
<mds-status-bar visible position="top">
  <mds-button variant="primary" tone="strong">Conferma</mds-button>
</mds-status-bar>

<!-- CORRECT -->
<mds-status-bar visible position="bottom-left">
  <mds-button variant="primary" tone="strong">Conferma</mds-button>
</mds-status-bar>

Do Not Pierce the Shadow DOM to Style Internals

::part() is supported only for the three documented parts: status-bar, status-bar-area, and actions. Using undocumented internal selectors or >>> couples your styles to the implementation and will break on minor releases.

/* INCORRECT */
mds-status-bar::part(description) {
  font-size: 14px;
}
mds-status-bar >>> .status-bar {
  background: white;
}

/* CORRECT */
mds-status-bar {
  --mds-status-bar-backdrop: rgb(var(--magma-shadow-ink) / 0.15);
  --mds-status-bar-max-width: 640px;
}
mds-status-bar::part(status-bar) {
  border: 1px solid rgb(var(--magma-border-default));
}

Do Not Slot <mds-icon> or Raw HTML for the Description

description is a prop. Slotting an <mds-text> or <span> into the default slot to mimic a description clutters the actions area and will compete with the layout of the slotted buttons.

<!-- INCORRECT -->
<mds-status-bar visible>
  <mds-text typography="caption">Modifica in corso</mds-text>
  <mds-button variant="primary" tone="strong">Salva</mds-button>
</mds-status-bar>

<!-- CORRECT -->
<mds-status-bar visible description="Modifica in corso">
  <mds-button variant="primary" tone="strong">Salva</mds-button>
</mds-status-bar>

Do Not Slot Non-Interactive Content as the Only Child

The default slot is designed for action controls. Placing only decorative or static elements (icons, images, plain text) provides no user action and wastes the status-bar pattern. Use mds-banner or mds-note for passive status messages.

<!-- INCORRECT -->
<mds-status-bar visible description="Operazione completata">
  <mds-icon name="mi/baseline/check-circle"></mds-icon>
</mds-status-bar>

<!-- CORRECT - use mds-banner for passive messages -->
<mds-banner variant="success" tone="weak" headline="Operazione completata"></mds-banner>

<!-- CORRECT - or combine icon-button with a real action -->
<mds-status-bar visible description="Operazione completata">
  <mds-button
    icon="mi/baseline/check-circle"
    variant="success"
    tone="strong"
    aria-label="Chiudi notifica"
  ></mds-button>
</mds-status-bar>