Aller au contenu
SkillCodex
Menu

Button

Bouton

Un contrôle nommé qui exécute une action dans l'interface actuelle lorsqu'il est activé.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : cliquer pour enregistrer ces changementsun contrôle qui exécute une actionenvoyer ce formulaire

Toutes les formulations
Enregistrer et partager

Reconnaître

Déclencher ou naviguer

Essayer

Le contrôle déclenche-t-il une action, change-t-il de destination ou doit-il rester iconique ?

Bouton

Contexte commun aux essais

Un écran de projet permet à l'utilisateur de déclencher une opération ou d'atteindre une destination depuis un contrôle adapté à l'espace disponible.

Bouton

Mission

Bouton d'action - Button

Activer Enregistrer avec Espace, vérifier que l'attente bloque une seconde requête et corriger une erreur serveur.

Objet : Compte rendu hebdomadaire

Résultat de l’essai

Le brouillon est prêt à être enregistré.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
Le bouton d'envoi actif possède un libellé clair, un focus visible et un contraste de texte suffisant.
Cas limite
Pendant l'envoi, le bouton garde sa largeur, expose Enregistrement et bloque les doubles activations sans retirer le focus.

Ce que cet essai montre

Button exécute une action ; Link navigue vers une destination, tandis qu'Icon button est la variante compacte dont le libellé visible est remplacé par une icône.

Lequel convient à ton besoin ?

Bouton

Envoyer ou réinitialiser un formulaire

Lien

Atteindre une autre page ou route

Quel composant utilises-tu ici ?
Différence et sources

Button exécute une action ; Link navigue vers une destination, tandis qu'Icon button est la variante compacte dont le libellé visible est remplacé par une icône.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Contrôle

    L'élément interactif qui reçoit la saisie et expose son état.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Déclencher ou naviguer

      Bouton appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Lien

      Choisis Bouton si l’activation change quelque chose ici, comme envoyer, ouvrir ou supprimer. Choisis Lien si l’activation emmène vers une autre page ou route que l’on peut ouvrir dans un nouvel onglet.

      Comparer cette paire
    • Ne pas confondre

      Bouton icône

      Choisis Bouton si l’action est principale ou peu familière et qu’un libellé visible évite un malentendu. Choisis Bouton icône si une action familière se répète dans une barre dense et que l’espace compte plus qu’un libellé visible.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    Ce que les gens décrivent

    Alias documentés : bouton d'action, appel à l'action, bouton d'envoi

    • cliquer pour enregistrer ces changements
    • un contrôle qui exécute une action
    • envoyer ce formulaire
    • appuyer pour créer un nouveau projet
    • une action principale avec un libellé clair
    • faire quelque chose sans changer de page

    Choisir

    À utiliser quand

    • Envoyer ou réinitialiser un formulaire
    • Exécuter une commande sur place comme Enregistrer ou Ajouter

    À éviter quand

    • L'activation navigue surtout vers une autre URL
    • Le contrôle n'a pas de nom d'action clair

    Comparer

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Active la même action sans conséquence une fois avec Entrée et une fois avec Espace lorsque son bouton a le focus.

      Résultat attendu

      Les deux touches déclenchent une fois l’action prévue, avec un focus visible et sans navigation inattendue.

    2. 2. À faire

      Lance une action qui prend du temps et essaie de la réactiver pendant l’attente.

      Résultat attendu

      L’attente est claire, les actions en double sont empêchées et le bouton ne se déplace pas ni ne perd inutilement le focus.

    3. 3. À faire

      Utilise le cas d’échec de l’exemple d’essai, puis relance l’action.

      Résultat attendu

      L’échec se distingue de la réussite, l’action redevient utilisable au bon moment et le nouvel essai aboutit à un résultat clair.

    Contrat complet
    1. 1Le bouton exécute une action et non une navigation
    2. 2Son libellé visible nomme l'action
    3. 3Entrée, Espace, focus, désactivation et attente fonctionnent
    4. 4Contraste et taille de cible respectent la barre qualité

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Bouton sans casser son comportement

    # Implémenter Bouton dans ton agent
    
    ## Objectif
    Implémente Bouton pour ce comportement vérifié : Un contrôle nommé qui exécute une action dans l’interface actuelle lorsqu’il est activé.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Bouton répond au besoin avant de coder.
    
    ## Comportement requis
    - L’activation au pointeur, avec Entrée ou Espace, exécute une action nommée une seule fois.
    - La région de contenu expose son état occupé tandis que l’indicateur visuel reste redondant.
    
    ## États à couvrir
    - Enregistrement au repos
    - Enregistrement en cours
    - Erreur d’enregistrement
    - Enregistrement réussi
    
    ## Accessibilité
    - Rôle ARIA : button
    - Le contrôle principal ou la région nommée pour Bouton possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    - Un indicateur de focus contrasté reste visible dans chaque variante active et pendant l’attente.
    - Sans objet : un bouton d’action n’ouvre pas de surface sauf si cette relation distincte est définie.
    - Le nom accessible, l’état désactivé ou pressé si pertinent et le résultat en attente sont exposés sans ambiguïté de libellé.
    - Tab focalise le bouton
    - Entrée et Espace l’activent
    - L’envoi suit son type explicite
    
    ## Quand ne pas utiliser
    - L’activation navigue surtout vers une autre URL
    - Le contrôle n’a pas de nom d’action clair
    
    ## Critères d’acceptation
    - Le bouton exécute une action et non une navigation
    - Son libellé visible nomme l’action
    - Entrée, Espace, focus, désactivation et attente fonctionnent
    - Contraste et taille de cible respectent la barre qualité
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Bouton sur un parcours réel

    # Vérifier Bouton après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Bouton au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:f0d08c31e6bb33a8a4704af3e1b3adbbc95eb58beeec3963db19cc4808bf8980

    Diagnostiquer un problème

    Trouve et corrige le défaut de Bouton

    # Déboguer Bouton dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Bouton.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Le bouton exécute une action et non une navigation
    - Son libellé visible nomme l’action
    - Entrée, Espace, focus, désactivation et attente fonctionnent
    - Contraste et taille de cible respectent la barre qualité
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Bouton

    # Empêcher la régression de Bouton
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Bouton aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:aa5b3f93c2c8e99b078ad192dcee37757c4b7c07d9a92f7522c4817f55c7fc9e

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:4dd462862d86e9fba248f70e1d2a49e682c27e73004738f8d31d8a77dcfc6c01

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    button[type=button|submit|reset]

    NatifUn bouton exécute une action. La navigation relève d’un lien, et un type explicite évite l’envoi accidentel du formulaire.

    Détails techniques

    Comportements

    • Exécuter une action

      L'activation au pointeur, avec Entrée ou Espace, exécute une action nommée une seule fois.

    • Marquer la région occupée

      La région de contenu expose son état occupé tandis que l'indicateur visuel reste redondant.

    États

    • Enregistrement au repos

      Enregistrement au repos

    • Enregistrement en cours

      Enregistrement en cours

    • Erreur d’enregistrement

      Erreur d’enregistrement

    • Enregistrement réussi

      Enregistrement réussi

    Transitions d’état

    • Enregistrement au repos → Enregistrement en cours

      Entrée, Espace, le pointeur ou le toucher active Enregistrer une seule fois.

    • Enregistrement en cours → Erreur d’enregistrement

      La requête d’enregistrement échoue et expose une erreur réessayable sans dupliquer la requête.

    • Erreur d’enregistrement → Enregistrement en cours

      L’activation de Réessayer lance une nouvelle requête tout en conservant le focus et une largeur stable.

    • Enregistrement en cours → Enregistrement réussi

      La requête d’enregistrement réussit et expose le résultat terminé sans seconde activation.

    • Enregistrement réussi → Enregistrement au repos

      Réinitialiser restaure l’exemple rejouable dans son état initial Enregistrer.

    Scénarios de test

    Contexte
    Un formulaire de profil enregistre le nom affiché avec l'action principale Enregistrer.
    Mission
    Activer Enregistrer avec Espace, vérifier que l'attente bloque une seconde requête et corriger une erreur serveur.
    État principal
    Le bouton d'envoi actif possède un libellé clair, un focus visible et un contraste de texte suffisant.
    Cas limite
    Pendant l'envoi, le bouton garde sa largeur, expose Enregistrement et bloque les doubles activations sans retirer le focus.

    Signaux visuels

    • Libellé d'action visible
    • Forme et contraste indiquent l'interactivité
    • États principal, secondaire et désactivé partagent un système

    Signaux comportementaux

    • Entrée et Espace l'activent
    • L'état désactivé empêche l'action
    • L'état en attente empêche une double activation

    Accessibilité

    Rôle
    button
    Nom accessible
    Le contrôle principal ou la région nommée pour Bouton possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    Focus clavier
    Un indicateur de focus contrasté reste visible dans chaque variante active et pendant l'attente.
    Fermeture
    Sans objet : un bouton d'action n'ouvre pas de surface sauf si cette relation distincte est définie.
    Défilement
    L'activation du contrôle avec Espace ne fait pas défiler la page, et le retour apparaît sans déplacer le focus ni provoquer de saut inattendu.
    Annonce
    Le nom accessible, l'état désactivé ou pressé si pertinent et le résultat en attente sont exposés sans ambiguïté de libellé.
    Clavier
    • Tab focalise le bouton
    • Entrée et Espace l'activent
    • L'envoi suit son type explicite

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • button[type=button|submit|reset]

      implementationKind
      native
      nativeElement
      button[type=button|submit|reset]
      ariaPattern
      button
      radixPrimitive
      Non applicable
      shadcnRecipe
      Non applicable
      runtimeDependency
      Non applicable
      packageName
      Non applicable
      exportName
      Non applicable
      exactVersion
      Non applicable
      status
      verified
      sourceId
      source-ui-html-button
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Un bouton exécute une action. La navigation relève d’un lien, et un type explicite évite l’envoi accidentel du formulaire.

      Vérifier la source du binding

    Sources

    • WHATWG HTML: The button element
      sourceId
      source-ui-html-button
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
      status
      verified

      Affirmation couverte : Bouton : sémantique native normative, états, attributs et comportement du navigateur pour button.

    • WAI-ARIA APG: Button Pattern
      sourceId
      source-ui-aria-button
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/button/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:863329ea659a53439b0953eec0bd0af7c6219e372d0e878f75e57d263924704c
      status
      verified

      Affirmation couverte : Bouton : guide APG informatif pour le modèle bouton : rôles, états, relations et interactions au clavier.

    • WCAG 2.2: Status Messages
      sourceId
      source-ui-wcag-understanding-status-messages
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:cf2a8c16b20c1a94164c9a37e2b3f15d9a7d3f47d88385d47432d6a29655609e
      status
      verified

      Affirmation couverte : Bouton : guide WCAG informatif sur les messages d'état annoncés sans déplacer le focus.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Bouton : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Bouton : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.