IconButton
Un bouton rond centré sur une icône, avec un libellé facultatif posé dessous. L'icône ne dit rien aux lecteurs d'écran : aria-label est requis.
Utilisation
import { IconButton } from "@monstera/ui"Tons
Les mêmes quatre tons que le bouton texte. Le ton peint le cercle, le libellé reste noir quel que soit le ton choisi.
Variantes
Filled remplit le cercle, outlined n'en garde que la bordure, ghost ni l'un ni l'autre. La variante ne touche que le cercle.
Tailles
Le cercle mesure 48 px en medium, la taille par défaut, et 40 px en small, réservé aux environnements denses : barres d'outils, en-têtes, écrans de gestion. L'icône reste à 24 px dans les deux cas, seul le vide autour d'elle change.
États
La pastille se pose sur le coin haut droit et s'entoure d'un anneau de la couleur du fond pour rester lisible sur un cercle clair. Elle ne signale qu'un changement d'état qui appelle l'attention, pas un décor permanent. Désactivé grise le cercle et le libellé.
Il s'aligne, contrairement au Button
C'est la différence de règle à retenir entre les deux. Le Button interdit deux filled de même niveau côte à côte ; l'IconButton, lui, se groupe volontiers. Une barre d'outils, un en-tête d'application, une rangée d'actions sur une fiche : plusieurs filled alignés y sont non seulement permis mais attendus, parce qu'ils forment une liste d'actions homogènes et non une hiérarchie.
La contrepartie est la cohérence des tailles : dans un même groupe, tous les boutons partagent la même dimension. Un md glissé au milieu de sm casse l'alignement et laisse croire à une priorité qui n'existe pas.
Masquer le libellé
label est facultatif, et s'en passer est le mode compact qui rend les barres d'outils possibles. Mais une icône seule ne parle que si elle est universellement reconnue : dès qu'elle peut prêter à confusion, on affiche le libellé plutôt que de compter sur la devinette.
Dans tous les cas, aria-label reste requis : c'est lui qui nomme le bouton pour les lecteurs d'écran, y compris quand le libellé visuel est absent.
API
Prop
Type