El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Botones

Los estilos de los botones se pueden aplicar a elementos <a>, <button> o <input>.

El texto en inglés de los botones se convertirá a mayúsculas.

Modo de uso

El componente de botón está escrito solo con CSS; basta con escribir el código HTML para que funcione.

Lectura relacionada

Pautas de diseño de Material Design: componentes - Botón

Estilo

Botón plano

Para obtener el estilo de botón plano, agrega la clase .mdui-btn a los elementos <a>, <button> o <input>.

Ejemplo

<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>

Botón flotante

Agregar la clase .mdui-btn-raised a un botón plano le dará un efecto de elevación.

Ejemplo

<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>

Botón de icono

Agregar la clase .mdui-btn-icon a un botón plano lo convertirá en un botón de icono.

Ejemplo

<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>

Botón denso

Los botones densos son ligeramente más pequeños que los normales y resultan adecuados para entornos donde el ratón y el teclado son los métodos de entrada principales. Se pueden aplicar añadiendo la clase .mdui-btn-dense a un botón normal.

Ejemplo

<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>

Estado deshabilitado

Deshabilitar un botón agregando el atributo disabled al botón.

Ejemplo

<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>

Elemento de bloque

Agregar la clase .mdui-btn-block a un botón lo estirará al 100% del ancho del elemento padre y lo convertirá en un elemento de bloque.

Ejemplo

<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>

Grupo de botones

Poner varios botones dentro de un contenedor de grupo .mdui-btn-group los convierte en un grupo de botones. Agregar la clase .mdui-btn-active a un botón indica que dicho botón está seleccionado.

Ejemplo

<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>

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-btn`	Definir un botón
`.mdui-btn-raised`	Definir un botón flotante
`.mdui-btn-icon`	Definir un botón de icono
`.mdui-btn-block`	Hacer que el botón sea un elemento de bloque
`.mdui-btn-group`	Contenedor del grupo de botones
`.mdui-btn-active`	El botón del grupo de botones está seleccionado

Efecto Ripple

Botón FAB