Boutons & Liens
Liens de navigation, échanges dynamiques et boutons d'action.
Navigation Links
Text Links
Liens actifs : exact ou section
Chemin courant : /components/buttons. Un lien vers la page même est allumé et son clic ne fait rien ; un lien de section (exact={ false }) s'allume depuis une sous-page et reste cliquable ; la racine ne s'allume jamais par en dessous.
- Cette page (exact)allumé, aria-current="page", clic sans effet
- /components (section)allumé, aria-current="true", le clic navigue
- /components (exact)éteint
- / (section)éteint : la racine est jugée strictement
Smart back link
Sortez par l'un des liens, puis revenez ici : le lien « smart » vise la page quittée telle qu'elle était, sa requête comprise, alors que le lien simple vise toujours le chemin nu.
Page précédente
aucune — entrée directeAction Buttons (Motion)
Bouton occupé : busy ou disabled
Deux boutons avec infobulle, indisponibles 1,5 s le temps de leur action. Activez-les au clavier (Tab puis Entrée). Avec busy, le bouton garde le focus pendant et après l'action : Entrée le relance aussitôt. Avec disabled, le navigateur retire le focus d'un bouton qui devient désactivé. Dans les deux cas, le bouton n'est jamais recréé.
Bouton en chargement : loading
loading fait tout ce que fait busy — focus gardé, clics et Entrée ignorés, infobulle éteinte — et remplace l'icône par un indicateur. loadingLabelchange le texte le temps de l'action. Un bouton rond seulement occupé gardebusy : son icône ne change pas.
Input & Join Groups
Swap Components
Dans un formulaire
Un Button est type="button" par défaut : posé dans un <form>, il ne l’envoie pas. Seul le bouton qui l’écrit — type="submit" — envoie le formulaire. Les + et − du compteur, « Ajouter une ligne » et les croix des lignes ne font que leur travail : le compteur d’envois ne bouge pas.
Segmented control
A group of toggles, not a tab bar : there is no panel, only a reading that changes in place. Each button carries aria-pressed, so the chosen one announces itself to a reader who cannot see the highlight.
A segment whose label is an icon names itself through title — hover one, and check with a screen reader that it is announced.
An empty list renders nothing — there is no group below this line.