← All components

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.