Comment l'utilisateur déclenche quelque chose ou se déplace dans l'application.
Bouton (button)
Élément cliquable qui déclenche une action :
- Principal (primary) : la plus importante, colorée et pleine, un seul par écran.
- Secondaire (secondary) : alternative, fond discret ou bordé.
- Destructif (destructive) : irréversible (Supprimer), généralement rouge.
- Fantôme (ghost) : mineure, sans fond, texte cliquable.
La règle : un bouton principal par écran, le reste en secondaire ; le destructif réservé aux actions qui détruisent des données.
Lien (link)
Texte cliquable, souvent souligné ou coloré, vers une autre page ou section.
Quand l'utiliser : naviguer entre pages, ouvrir une page externe : navigation, pas action métier.
Quand l'éviter : déclencher une action (envoyer, supprimer) → bouton ; règle simple : si ça change la base, c'est un bouton.
Fil d'Ariane (breadcrumb)
Suite de liens en haut de page qui indique où l'on se trouve dans l'arborescence : Accueil > Clients > Jean Dupont > Factures.
Quand l'utiliser : application à plusieurs niveaux, pour remonter sans le bouton précédent du navigateur.
Quand l'éviter : application à plat avec 2-3 pages : inutile.
Pagination (pagination)
Suite de numéros en bas d'une liste ou d'un tableau pour passer d'une page de résultats à l'autre.
Quand l'utiliser : dès qu'une liste dépasse 20-50 éléments, pour éviter de tout charger d'un coup.
Quand l'éviter : petites listes complètes, ou flux continu (défilement infini).
Bouton d'icône (icon button)
Bouton qui ne contient qu'une icône, sans texte : très compact pour barres d'outils, lignes de tableau.
Quand l'utiliser : place comptée et icône universellement comprise (poubelle, crayon), toujours avec une infobulle au survol.
Quand l'éviter : action importante ou peu courante → bouton avec libellé, sinon risque de malentendu.