Actions

Button

A 40px pill that starts an action, in five variants ordered by emphasis.

Category: ActionsOpen the preview alone

Live preview

Reference specimen. Example copy comes from the Pelote specs and is in French.

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.

Reference specimen. Example copy comes from the Pelote specs and is in French.

A 40px pill that starts an action, with five variants ordered by emphasis: filled, tonal, outlined, text, danger.

Rules

btn-filled: the screen's single primary action. btn-tonal: important but secondary. btn-outlined: a neutral alternative next to a filled. btn-text: dialog actions and in-card links. btn-danger: a confirmed destructive action.
Sizes: 40px by default, btn-lg 48px for mobile and forms, btn-xl 56px for a hero.
On press the radius goes from 20 to 12px (Expressive morphing). Label 14px / 600, sentence case, never truncated.
Never a fixed width. If two buttons no longer fit, they stack full width with the primary action on top on mobile.

Button

Live preview

Rules

More

Appearance