mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Bouton

Le style des boutons peut être appliqué aux éléments <a>, <button> ou <input>.

Les lettres anglaises des boutons seront automatiquement transformées en majuscules.

Utilisation

Le composant bouton est écrit en CSS pur ; il suffit de rédiger du code HTML pour qu’il fonctionne.

Lecture associée

Spécifications Material Design : Composant - Bouton

Style

Bouton plat

Ajoutez la classe .mdui-btn aux éléments <a>, <button> ou <input> pour obtenir le style du bouton plat.

Exemple

<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>

Bouton flottant

Ajoutez la classe .mdui-btn-raised au bouton plat pour lui donner un effet de surélévation.

Exemple

<button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button>

Bouton icône

Ajoutez la classe .mdui-btn-icon au bouton plat pour le transformer en bouton icône.

Exemple

<button class="mdui-btn mdui-btn-icon">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

Bouton dense

Le bouton dense est légèrement plus petit qu’un bouton standard et convient aux usages où la souris et le clavier sont les principaux moyens de saisie. Ajoutez la classe .mdui-btn-dense au bouton standard.

Exemple

<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

État désactivé

Ajoutez l’attribut disabled au bouton pour le désactiver.

Exemple

<button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled>
  <i class="mdui-icon material-icons">add</i>
</button>

Élément de bloc

Ajoutez la classe .mdui-btn-block au bouton pour l’étendre sur 100 % de la largeur du parent ; le bouton devient alors un élément de bloc.

Exemple

<div class="mdui-row-xs-2">
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
</div>

Groupe de boutons

Placez plusieurs boutons dans un conteneur de groupe de boutons .mdui-btn-group pour former un groupe de boutons. Ajoutez la classe .mdui-btn-active au bouton pour indiquer qu’il est sélectionné.

Exemple

<div class="mdui-btn-group">
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_left</i>
  </button>
  <button type="button" class="mdui-btn mdui-btn-active">
    <i class="mdui-icon material-icons">format_align_center</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_right</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_justify</i>
  </button>
</div>

Classes CSS

Nom de classe	Description
`.mdui-btn`	Définir un bouton
`.mdui-btn-raised`	Définir un bouton flottant
`.mdui-btn-icon`	Définir un bouton icône
`.mdui-btn-block`	Rendre le bouton en élément de bloc
`.mdui-btn-group`	Le conteneur du groupe de boutons
`.mdui-btn-active`	Le bouton du groupe de boutons est sélectionné

Effet ripple

Bouton FAB