Pelote
EN
Actions

Button

Pilule de 40px qui lance une action, en cinq variantes classées par emphase.

Catégorie: ActionsOuvrir l'aperçu seul

Aperçu en direct

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

ExpressiveRéférence

Hauteur 40px, padding 0 20px, rayon radius-btn. Calque d'état en currentColor : 8 % au survol, 12 % à l'appui.

UX / UIRègles illustrées

À faire
Un seul filled, à droite, avec un verbe précis. L'alternative est en texte.
À éviter
Deux filled côte à côte : plus de hiérarchie. Et « OK » ne dit pas ce qui va se passer.
À faire
Action destructive en btn-danger, précédée d'une confirmation qui nomme la conséquence.
À éviter
Capitales, coins carrés, couleur primary pour une suppression : trois écarts au système.
À faire
Libellé long (allemand, +35 %) : les boutons passent en pile, pleine largeur, action principale en haut.
À éviter
Largeur fixe et texte tronqué : on ne sait plus ce que fait le bouton.

Variante M3EMême composant, mêmes rôles, autre matière

PlazaWii U / 3DS

Bulle scl + reflet gloss-hi, gel tiré de primary pour l'action principale. À l'appui la bulle s'enfonce d'1px et perd son ombre.

ChromeY2K

Chrome taillé dans secc avec cassure centrale, gel primary pour l'action principale, libellé Michroma en capitales espacées. À l'appui le dégradé s'inverse.

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

Pilule de 40px qui lance une action ; cinq variantes classées par emphase : filled, tonal, outlined, text, danger.

Quand l'utiliser

  • btn-filled : l'action principale de l'écran, une seule.
  • btn-tonal : actions importantes mais secondaires (« Widgets », « Redéployer »).
  • btn-outlined : alternative neutre à côté d'un filled.
  • btn-text : actions de dialogue, liens d'action dans une carte.
  • btn-danger : action destructive confirmée (Supprimer, Stop).

Ce que fournit le consommateur

Un libellé verbe d'action en casse de phrase, une icône optionnelle de 18px avant le libellé, .st pour le calque d'état.

Règles

  • Tailles : 40px par défaut, btn-lg 48px pour mobile et formulaires, btn-xl 56px pour un héros.
  • À l'appui, le rayon passe de 20 à 12px (morphing Expressive).
  • Libellé en 14px / 600. Jamais de capitales, jamais tronqué : le bouton s'élargit.

Localisation

  • Jamais de largeur fixe : min-width éventuel, largeur au contenu. Prévoir +35 % de texte (anglais vers français ou allemand).
  • Si deux boutons ne tiennent plus côte à côte, ils passent en pile pleine largeur, l'action principale en haut sur mobile.
  • Un libellé ne se tronque jamais et ne passe pas sur deux lignes dans le bouton : on raccourcit la phrase dans la langue concernée, ou on empile.
  • Les icon-buttons ont un aria-label et un tooltip traduits.
  • Désactivé : opacité 0.5, et le libellé explique ce qui manque quand c'est possible.

Plus

TokensAssetsLicence GitHub

Apparence

Le choix s'applique tout de suite et reste sur cet appareil.

Mode
Couleur du thème Tous les rôles sont régénérés depuis cette couleur source.
Style La matière change, les composants et les rôles restent les mêmes.
Material YouSur le web, la couleur du fond d'écran n'est pas accessible. Choisis une couleur source ci-dessus ; dans les apps Android 12+, Material You suit le fond d'écran.