[UX] Boutons : un système unique primary / secondary / danger / icône #58

Open
opened 2026-10-28 23:28:39 -04:00 by bruno · 0 comments
Owner

Constat (audit visuel, v0.41.0)

Il n'y a pas un bouton Kanbante, il y en a six : .nav-pill, .btn-sm, .btn-mini, .btn-save, .btn-inline, .proj-primary — plus des <button> ad hoc (triage, seg-tabs, dash-view-toggle). Le primaire est parfois un dégradé vert, parfois un fond uni, parfois un simple contour ; les états hover/active/disabled ne sont pas les mêmes partout, et certains boutons n'ont pas d'état désactivé visible. L'utilisateur doit réapprendre ce qui est cliquable à chaque page.

Travail attendu

  • Définir 4 variantes : primary (fond vert uni, texte blanc), secondary (fond surface, bordure), danger (contour/rouge), icon (carré 36-40px, icône SVG seule, tooltip).
  • Migrer les composants existants vers ces variantes, avec les 4 états (repos, hover, active, disabled, focus-visible) identiques partout.
  • Tailles : une hauteur de cible minimale de 36px (44px sur mobile, voir issue responsive).

Critère de validation

Vérifié par le build de l'utilisateur : sur Projets, tableau, Mes issues et Administration, les actions principales se reconnaissent au premier regard et se comportent pareil.

Hors portée

Le contenu des actions (ce qu'elles font) ne change pas.

## Constat (audit visuel, v0.41.0) Il n'y a pas un bouton Kanbante, il y en a six : `.nav-pill`, `.btn-sm`, `.btn-mini`, `.btn-save`, `.btn-inline`, `.proj-primary` — plus des `<button>` ad hoc (triage, seg-tabs, dash-view-toggle). Le primaire est parfois un dégradé vert, parfois un fond uni, parfois un simple contour ; les états hover/active/disabled ne sont pas les mêmes partout, et certains boutons n'ont pas d'état désactivé visible. L'utilisateur doit réapprendre ce qui est cliquable à chaque page. ## Travail attendu - Définir 4 variantes : primary (fond vert uni, texte blanc), secondary (fond surface, bordure), danger (contour/rouge), icon (carré 36-40px, icône SVG seule, tooltip). - Migrer les composants existants vers ces variantes, avec les 4 états (repos, hover, active, disabled, focus-visible) identiques partout. - Tailles : une hauteur de cible minimale de 36px (44px sur mobile, voir issue responsive). ## Critère de validation Vérifié par le build de l'utilisateur : sur Projets, tableau, Mes issues et Administration, les actions principales se reconnaissent au premier regard et se comportent pareil. ## Hors portée Le contenu des actions (ce qu'elles font) ne change pas.
bruno added the kanban:todo label 2026-10-28 23:28:39 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Projets/kanbante#58