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. Triggers a user action. Four variants, each with a precise hierarchy and use case. The critical variant carries special behavioral rules for irreversible actions.

VariantesVariants

Règles absoluesAbsolute rules

• Maximum 1 bouton primary par section ou formulaireMaximum 1 primary button per section or form
• Toujours un libellé explicite — jamais "OK" ou "Confirmer" seulAlways an explicit label — never "OK" or "Confirm" alone
• Le bouton critical DOIT déclencher un pattern de confirmationThe critical button MUST trigger a confirmation pattern
• Toujours un :focus-visible visible — outline: 2px solid var(--sda-semantic-color-border-focus)Always a visible :focus-visible — outline: 2px solid var(--sda-semantic-color-border-focus)
• Jamais deux boutons primary côte à côteNever two primary buttons side by side
• Jamais de couleur ou espacement en durNever hardcoded colors or spacing
• Jamais de variante inventée hors de component.jsonNever an invented variant outside component.json

Tokens de composantComponent tokens

AccessibilitéAccessibility

• Contraste minimum 4.5:1 sur fond blanc (WCAG AA)Minimum contrast 4.5:1 on white background (WCAG AA)
• Navigation clavier complète — Tab, Enter, SpaceFull keyboard navigation — Tab, Enter, Space
• Focus visible : outline: 2px solid var(--sda-semantic-color-border-focus); outline-offset: 2pxVisible focus: outline: 2px solid var(--sda-semantic-color-border-focus); outline-offset: 2px
• Pour les boutons icône seul : aria-label obligatoireFor icon-only buttons: aria-label required
• État loading : aria-busy="true" + largeur préservéeloading state: aria-busy="true" + width preserved
• État disabled : aria-disabled="true" ou disableddisabled state: aria-disabled="true" or disabled

Règles spéciales — variante criticalSpecial rules — critical variant

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

1. Le pattern de confirmation existe dans l'interface (modale, popconfirm)The confirmation pattern exists in the UI (modal, popconfirm)
2. Le libellé décrit l'action — ex: "Supprimer définitivement le dossier"The label describes the action — e.g. "Delete folder permanently"
3. Le contraste est ≥ 4.5:1 sur fond blancContrast is ≥ 4.5:1 on white background
4. L'agent escalade à un humain si le caractère irréversible de l'action n'est pas certainThe agent escalates to a human if the irreversibility of the action is uncertain

Implémentation — Lit Web ComponentImplementation — 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-patternsAnti-patterns