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

IcônesIcons

Approche hybride : propriété (Figma, React, tous frameworks) ou slot (composition avancée). Le contenu slotté a toujours la priorité sur la propriété. Hybrid approach: property (Figma, React, all frameworks) or slot (advanced composition). Slotted content always takes priority over the property.

<!-- Propriété icon — Figma Code Connect, React et tous les frameworks -->
<agtc-button icon="plus">Ajouter un élémentAdd item</agtc-button>
<agtc-button variant="secondary" icon-suffix="arrow-right">ContinuerContinue</agtc-button>

<!-- Icon-only — label="" obligatoire -->
<agtc-button icon-only icon="x" label="Fermer le panneauClose panel"></agtc-button>

<!-- Slot — composition avancée, SVG custom -->
<agtc-button>
  <agtc-icon slot="prefix" name="plus"></agtc-icon>
  Ajouter un élémentAdd item
</agtc-button>

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(--agtc-semantic-color-border-focus)Always a visible :focus-visible — outline: 2px solid var(--agtc-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(--agtc-semantic-color-border-focus); outline-offset: 2pxVisible focus: outline: 2px solid var(--agtc-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

Compatibilité frameworksFramework compatibility

Framework	icon="..."	slot="prefix"	Figma Code Connect
HTML natif	✅	✅	—
React 19	✅	✅	✅
React 18	✅	⚠️ via refvia ref	✅
Angular	✅	✅	✅
Vue 3	✅	✅	✅
Svelte	✅	✅	✅

Implémentation — Lit Web ComponentImplementation — Lit Web Component

import { LitElement, html, css } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
// agtc-icon doit être enregistré par le consommateur pour les propriétés icon/icon-suffix
// import './agtc-icon.js';

class AgtcButton extends LitElement {
  static properties = {
    variant:    { type: String,  reflect: true }, // 'primary'|'secondary'|'ghost'|'critical'
    disabled:   { type: Boolean, reflect: true },
    loading:    { type: Boolean, reflect: true },
    iconOnly:   { type: Boolean, reflect: true, attribute: 'icon-only' },
    icon:       { type: String },                 // nom d'icône Lucide (prefix)
    iconSuffix: { type: String,  attribute: 'icon-suffix' }, // nom d'icône (suffix)
    label:      { type: String },                 // aria-label — obligatoire pour icon-only
    loadingLabel: { type: String, attribute: 'loading-label' },
  };

  render() {
    const busy = this.loading;
    return html`
      <button
        class="${[this.variant, busy ? 'loading' : '', this.iconOnly ? 'icon-only' : ''].filter(Boolean).join(' ')}"
        ?disabled="${this.disabled || busy}"
        aria-busy="${busy}"
        aria-label="${ifDefined(this.label ? (busy ? this.loadingLabel : this.label) : undefined)}"
      >
        <span class="spinner" aria-hidden="true"></span>
        <span class="content">
          <slot name="prefix">
            ${this.icon ? html`<agtc-icon name="${this.icon}" size="control"></agtc-icon>` : ''}
          </slot>
          <slot></slot>
          <slot name="suffix">
            ${this.iconSuffix ? html`<agtc-icon name="${this.iconSuffix}" size="control"></agtc-icon>` : ''}
          </slot>
        </span>
      </button>
    `;
  }
}
customElements.define('agtc-button', AgtcButton);

DOs et DON'TsDOs and DON'Ts

Anti-patternsAnti-patterns

UX Patterns Reference

Patterns approved via the ux-pattern-review workflow (ADR-036). Decision: all approved.