Button
Bouton
Un contrôle nommé qui exécute une action dans l'interface actuelle lorsqu'il est activé.
Avec vos mots
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
Essayer
Déclencher ou naviguer
Comparer les trois comportements
Scénario comparatif partagé :
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Bouton
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.
Votre mission
Activer Enregistrer avec Espace, vérifier que l'attente bloque une seconde requête et corriger une erreur serveur.
Cas limite à vérifier
Pendant l'envoi, le bouton garde sa largeur, expose Enregistrement et bloque les doubles activations sans retirer le focus.
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
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Contrôle
L'élément interactif qui reçoit la saisie et expose son état.
À 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 les concepts proches
Build pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
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.
Accessibilité
- Role
- native button
- Nom accessible
- Le contrôle principal ou la région nommée 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
- 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.
- Scroll
- 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
Bindings
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
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Button performs an action. Navigation belongs to a link, and the type attribute prevents accidental form submission.
Vérifier la source du binding
Sources
- WHATWG HTML: The button element
WHATWG · standard · 2026-07-16
Affirmation couverte : Button: native button types, activation, disabled state, and form behavior.
- WAI-ARIA APG: Button Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Button: button naming, activation semantics, and Enter or Space keyboard behavior.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.