Button

Déclenche une action utilisateur. Quatre variantes, chacune avec une hiérarchie et un usage précis. La variante critical porte des règles comportementales spéciales pour les actions irréversibles.

Variantes

Règles absolues

• Maximum 1 bouton primary par section ou formulaire
• Toujours un libellé explicite — jamais "OK" ou "Confirmer" seul
• Le bouton critical DOIT déclencher un pattern de confirmation
• Toujours un :focus-visible visible — outline: 2px solid var(--sda-semantic-color-border-focus)
• Jamais deux boutons primary côte à côte
• Jamais de couleur ou espacement en dur
• Jamais de variante inventée hors de component.json

Tokens de composant

Accessibilité

• Contraste minimum 4.5:1 sur fond blanc (WCAG AA)
• Navigation clavier complète — Tab, Enter, Space
• Focus visible : outline: 2px solid var(--sda-semantic-color-border-focus); outline-offset: 2px
• Pour les boutons icône seul : aria-label obligatoire
• État loading : aria-busy="true" + largeur préservée
• État disabled : aria-disabled="true" ou disabled

Règles spéciales — variante critical

Token component.button.critical.$metadata.requires-confirmation = true. Avant d'utiliser cette variante, vérifier :

1. Le pattern de confirmation existe dans l'interface (modale, popconfirm)
2. Le libellé décrit l'action — ex: "Supprimer définitivement le dossier"
3. Le contraste est ≥ 4.5:1 sur fond blanc
4. L'agent escalade à un humain si le caractère irréversible de l'action n'est pas certain

Implémentation — Lit Web Component

import { LitElement, html, css } from 'lit';

class DsButton extends LitElement {
  static properties = {
    variant: { type: String }, // 'primary' | 'secondary' | 'critical' | 'ghost'
    disabled: { type: Boolean },
    loading:  { type: Boolean },
  };

  static styles = css`
    button {
      background: var(--sda-component-button-primary-background);
      color:      var(--sda-component-button-primary-text);
      padding:    var(--sda-component-button-primary-padding-y) var(--sda-component-button-primary-padding-x);
      border-radius: var(--sda-component-button-primary-radius);
      font-size:  var(--sda-semantic-typography-label-size);
      font-weight:var(--sda-semantic-typography-label-weight);
      border: none; cursor: pointer;
    }
    button:focus-visible {
      outline: 2px solid var(--sda-semantic-color-border-focus);
      outline-offset: 2px;
    }
  `;
}
customElements.define('ds-button', DsButton);

DOs et DON'Ts

Anti-patterns