Button

Utilisation

import { Button } from "@monstera/ui"

Un seul bouton rempli

Le filled en ton primary est le bouton étalon : un par écran. La règle admet une exception, les fiches et cartes modulaires indépendantes, où chaque bloc porte son action principale sans entrer en concurrence avec celle de la page.

Ce qu'elle interdit, c'est de juxtaposer ou d'empiler deux filled de même niveau : deux actions qui se présentent toutes deux comme prioritaires ne se départagent plus, et c'est au lecteur de trancher à la place de l'interface.

Ce que le bouton n'est pas

Un bouton sans libellé n'existe pas. Si l'icône doit se suffire, c'est IconButton qu'il faut, pas un Button dont on aurait vidé le texte.

Un bouton qui emmène ailleurs non plus. Pour une redirection ou un lien externe, c'est Link ; le ghost sert aux actions contextuelles légères, pas à la navigation.

Enfin, xs n'est jamais un choix de priorité. Sa zone de ciblage est trop courte pour le confort tactile, donc il ne porte ni validation de parcours, ni action critique, quel que soit le manque de place.

Accessibilité

En chargement, le bouton garde son nom : le libellé devient transparent mais reste lu, et aria-busy signale l'attente. Un bouton fait d'une seule icône passe par IconButton, qui exige un nom.

Le bouton a une hauteur minimale, pas une hauteur fixe : un libellé long ou agrandi passe à la ligne, centré, et le bouton grandit. Il ne se laisse pas comprimer sous son mot le plus long.

API