Aller au contenu

Hiérarchie des boutons – Design System Teadle

Source : CR Réunion Review 2026-02-04. Un seul CTA principal (corail) par page pour une hiérarchie visuelle claire.

Tokens Tailwind

Définis dans frontend/tailwind.config.js :

  • corail : corail-500, corail-600 (brand, CTA principal)
  • mushroom : mushroom-250 (bordures boutons secondaires)
  • grey : grey-900 (texte boutons secondaires)

Règles d’usage

Rôle Règle Classes (exemple)
CTA principal (1 par page) Réservé à l’action principale bg-corail-500 hover:bg-corail-600 text-white rounded-full focus:ring-2 focus:ring-offset-2 focus:ring-corail-500
Bouton secondaire Gérer, Éditer, Annuler, filtres bg-white border border-mushroom-250 text-grey-900 hover:bg-gray-50 rounded-full focus:ring-2 focus:ring-corail-500
Ghost / lien d’action Ajouter, Voir, Réinitialiser text-blue-500 hover:text-blue-600 hover:underline
Danger Supprimer uniquement bg-red-500 hover:bg-red-600 text-white (inchangé)

À éviter

  • Plus d’un bouton corail (plein) par page.
  • Utiliser bg-red-500 / text-red-500 pour des actions non destructives.
  • Couleurs Tailwind par défaut (red-500, gray-700) pour les boutons d’action : préférer les tokens Teadle (corail, mushroom, grey).

Fichiers de référence

  • frontend/src/views/trainer/OrganizationsView.vue
  • frontend/src/views/trainer/PlanningView.vue
  • frontend/src/views/trainer/DashboardView.vue
  • frontend/src/views/trainer/ShareCalendarView.vue
  • frontend/src/views/trainer/ConfigureOrganizationView.vue

Tags / badges de partage (PlanningShare)

Référence : même CR. Code couleur par valeur (pas par catégorie) pour distinguer visuellement sans lire le texte.

Mapping couleurs sémantiques

Catégorie Valeur Sens Classes Tailwind
Visibilité Masqué Sécurisé bg-green-50 text-green-700
Visibilité Détaillé Attention bg-orange-50 text-orange-700
Permission Lecture seule Neutre bg-mushroom-100 text-grey-700
Permission Lecture et réservation Actif bg-blue-50 text-blue-500

Style des tags

  • Taille : text-sm (pas text-xs)
  • Poids : font-medium
  • Base : inline-flex items-center px-2.5 py-0.5 rounded-full

Le libellé reste toujours affiché (WCAG 1.4.1 : ne pas se fier à la couleur seule).

Fichier : frontend/src/views/trainer/ShareCalendarView.vue — helpers getVisibilityBadgeClasses, getPermissionBadgeClasses.