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

Action Row Inside a Full Card

The typical use: a card with header, content, and footer regions, the footer holding the primary and secondary actions. Place <mds-card-footer> as a direct child of <mds-card> - it routes itself to the footer region automatically.

<mds-card>
  <mds-card-header>
    <mds-text typography="h6">Riepilogo pratica</mds-text>
  </mds-card-header>
  <mds-card-content>
    <mds-text>Verifica i dati prima di procedere.</mds-text>
  </mds-card-content>
  <mds-card-footer>
    <mds-button label="Annulla" variant="dark" tone="outline"></mds-button>
    <mds-button label="Conferma" variant="primary" tone="strong"></mds-button>
  </mds-card-footer>
</mds-card>

Single Call-to-Action

A card with only a media region and a footer is a valid minimal composition. The footer carries a lone action.

<mds-card>
  <mds-card-media>
    <mds-img src="/images/documento.jpg" alt="Anteprima documento"></mds-img>
  </mds-card-media>
  <mds-card-footer>
    <mds-button label="Scarica" icon="mi/baseline/download" variant="primary" tone="weak"></mds-button>
  </mds-card-footer>
</mds-card>

Destructive Action Pattern

Use a variant="error" button for destructive operations. Keep the cancel action to the left and the destructive action to the right - the footer’s justify-content: flex-end naturally aligns both.

<mds-card>
  <mds-card-header>
    <mds-text typography="h6">Elimina archivio</mds-text>
  </mds-card-header>
  <mds-card-content>
    <mds-text>Questa operazione non puo essere annullata.</mds-text>
  </mds-card-content>
  <mds-card-footer>
    <mds-button label="Annulla" variant="dark" tone="text"></mds-button>
    <mds-button label="Elimina" variant="error" tone="strong"></mds-button>
  </mds-card-footer>
</mds-card>

Supplementary Metadata Alongside an Action

The default slot accepts any slottable content - mix an informational label with a button when status context belongs at the bottom of the card.

<mds-card>
  <mds-card-header>
    <mds-text typography="h6">Stato richiesta</mds-text>
  </mds-card-header>
  <mds-card-footer>
    <mds-badge label="In attesa" variant="warning" tone="weak"></mds-badge>
    <mds-button label="Visualizza dettagli" variant="primary" tone="outline"></mds-button>
  </mds-card-footer>
</mds-card>

Explicit slot Attribute on a Plain Element

When you prefer a plain <div> or need to place a non-mds-card-* wrapper in the footer region, set slot="footer" explicitly. The element lands in the footer region, but <mds-card> infers its managed grid from the tag names of its children: add disable-auto-grid to the card, otherwise the regions overlap.

<mds-card disable-auto-grid>
  <mds-card-header>
    <mds-text typography="h6">Nota operativa</mds-text>
  </mds-card-header>
  <div slot="footer" style="display: flex; gap: calc(var(--spacing) * 300);">
    <mds-button label="Chiudi" variant="dark" tone="outline"></mds-button>
    <mds-button label="Salva nota" variant="primary" tone="strong"></mds-button>
  </div>
</mds-card>