Icon button
Bouton icône
Un bouton compact représenté visuellement par une icône mais doté de son propre nom d'action accessible et stable.
Avec vos mots
Ce que les gens décrivent
Alias documentés : bouton sans texte, icône de barre d'outils, bouton symbole
- une icône corbeille sur laquelle appuyer
- un bouton compact sans texte visible
- le symbole copier dans une barre
- une action icône avec un nom lu
- un bouton carré pour fermer
- une petite action modifier représentée par un crayon
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 icône
Icon button exécute une action comme Button mais sans texte visible ; Link exige toujours une vraie destination de navigation.
Votre mission
Atteindre Copier avec Tab, entendre son nom, activer avec Espace puis révéler son infobulle complémentaire.
Cas limite à vérifier
Si l'icône ne charge pas, le nom accessible et la cible restent intacts et l'action reste compréhensible pour la technologie d'assistance.
Mission
Bouton icône - Icon button
Atteindre Copier avec Tab, entendre son nom, activer avec Espace puis révéler son infobulle complémentaire.
pnpm test
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
- Une action familière se répète dans une barre dense
- Une action fermer, copier ou lecture possède un symbole connu
À éviter quand
- L'icône est ambiguë pour le public
- L'espace permet un bouton texte plus clair
Comparer les concepts proches
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.
BoutonLink navigue et possède un href ; Button exécute une action, tandis qu'Icon button reste une action même représentée uniquement par une icône.
LienBuild 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.
Révéler au focus ou au survol
Le survol ou le focus clavier révèle l'information après un court délai.
États
Copie du code prête
Copie du code prête
Code copié
Code copié
Transitions d’état
Copie du code prête → Code copié
Entrée, Espace, le pointeur ou le toucher active le bouton nommé Copier le code.
Code copié → Copie du code prête
La confirmation temporaire de copie se termine ou le spécimen rejouable est réinitialisé.
Scénarios de test
- Contexte
- Une barre de code contient les boutons icônes Copier, Agrandir et Fermer dans une seule famille.
- Mission
- Atteindre Copier avec Tab, entendre son nom, activer avec Espace puis révéler son infobulle complémentaire.
- État principal
- Le bouton de 44 px possède un focus visible, une icône décorative et le nom accessible indépendant Copier le code.
- Cas limite
- Si l'icône ne charge pas, le nom accessible et la cible restent intacts et l'action reste compréhensible pour la technologie d'assistance.
Accessibilité
- Role
- native button with an explicit accessible name
- 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
- Toute la cible du bouton, pas seulement le glyphe, reçoit un focus visible.
- Fermeture
- Le bouton lui-même ne se ferme pas ; toute surface contrôlée suit son propre contrat.
- 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
- Un aria-label stable ou un texte masqué visuellement nomme l'action ; Tooltip n'est jamais le seul nom accessible.
- Clavier
- Tab focalise le bouton icône
- Entrée et Espace l'activent
- Échap ferme l'infobulle complémentaire
Bindings
button[type=button] with accessible name
- implementationKind
- native
- nativeElement
- button[type=button] with accessible name
- 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 : The icon may be decorative, but the button needs its own stable accessible name; a tooltip is supplementary only.
Vérifier la source du binding
Sources
- WHATWG HTML: The button element
WHATWG · standard · 2026-07-16
Affirmation couverte : Icon button: native button types, activation, disabled state, and form behavior.
- WAI-ARIA APG: Button Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Icon 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.