Button
À quoi il sert
Button rend un bouton natif, ou un lien stylé en bouton quand href est fourni.
Quand l’utiliser
- Déclencher une action de la page, comme envoyer un formulaire.
- Naviguer vers une adresse avec href : le composant rend alors un lien a.
- Poser une seule action principale par vue, avec tone="primary" (règle de la doc du composant).
Quand ne pas l’utiliser
- Pour une simple navigation sans style de bouton : un lien natif suffit.
- Pour choisir une option parmi plusieurs : utiliser Choice ou Select, pas plusieurs boutons.
Exemples
<Button type="submit">Envoyer</Button>
<Button tone="secondary">Annuler</Button>
<Button href="/">Retour à l’accueil</Button>Accessibilité
Clavier
- Un bouton natif reçoit le focus avec Tab et s’active avec Entrée ou Espace.
- Un lien avec href s’active avec Entrée. Le focus visible vient de base.css.
- Un bouton désactivé, ou un lien désactivé sans href, ne reçoit pas le focus.
Lecteur d’écran
- Le nom accessible vient du contenu du slot : aucun libellé n’est écrit en dur.
- Un bouton désactivé porte l’état natif disabled, exposé aux technologies d’assistance.
- Un lien désactivé porte role="link" et aria-disabled="true".
Garanti par le composant
- type vaut button par défaut, sans soumission de formulaire involontaire (Button.test.ts).
- Cible minimale par tokens ; .pp-button ≥ 44 px (targets.spec.ts, forms.spec.ts).
- En mode contraste forcé, le ton primary garde une bordure ButtonText (Button.astro).
À la charge de l’intégrateur
- Donner un libellé qui décrit l’action seul : « Envoyer », pas « Cliquer ici ».
- Choisir href pour une navigation, et un bouton pour une action.
- Vérifier le contraste des tons dans le thème utilisé : le composant ne le mesure pas.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| tone | "primary" | "secondary" | "quiet" | — | Importance de l'action (défaut `primary`, l'action principale, une par vue). |
| size | "m" | "l" | — | Taille (défaut `m`) ; les deux respectent la cible de 44 px. |
| type | "button" | "submit" | "reset" | 'button' | Type du bouton ; `submit` seulement dans un formulaire. |
| disabled | boolean | false | Désactive le bouton (ou le lien, rendu `aria-disabled`). |
| href | string | — | Rend un lien `<a>` stylé en bouton au lieu d'un `<button>` : pour naviguer, pas pour agir. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-accent--pp-color-control--pp-color-fg--pp-color-muted--pp-color-on-accent--pp-duration-fast--pp-easing-standard--pp-font-line-height-heading--pp-font-size-0--pp-font-size-1--pp-font-weight-medium--pp-radius-control--pp-size-control-height--pp-size-rule--pp-size-target-min--pp-space-m--pp-space-s
Preuves et décisions
- WCAG 2.4.7 Focus visible (Focus Visible)
- WCAG 2.5.5 Taille de la cible (AAA) : 44 px pour les contrôles principaux
- WCAG 2.5.8 Taille de la cible (minimum) : 24 px avec espacement
- WCAG 4.1.2 Nom, rôle, valeur (Name, Role, Value)
- Tests : packages/astro/test/Button.test.ts ; apps/docs/e2e/forms.spec.ts