SKALES DS / Composants / Button, Input

Button et Input

Anatomie, variantes et états. Chaque état est défini une fois dans le système et hérité par toutes les applications.

Anatomie

Bouton principal, échelle 2x.

44 18 18 gap 8 r 8
Hauteur44 px (cible tactile minimale) Padding horizontal18 px, icône comprise Espace icône / texte8 px Rayonradius-md · 8 px Libellébody/md · 15 px · 600, une seule ligne Focusanneau 3 px blue-500, décalé de 2 px

Variantes et états

Par défaut
Survol
Focus clavier
Actif
Désactivé
Chargement
Principalvariant="primary"
Secondairevariant="secondary"
Accentvariant="accent"
Discretvariant="ghost"
Destructifvariant="danger"

Bonnes pratiques

À faire
Un seul bouton principal par vue, l’action secondaire en contour.
À éviter
Deux boutons principaux : l’utilisateur ne sait plus lequel est attendu.
À faire
Un verbe d’action court, sur une seule ligne.
À éviter
Un libellé long qui passe à la ligne et déforme le bouton.

Champ de saisie : états

Vide
Rempli
Focus
Erreur
Désactivé