O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Botão

Estilos de botão podem ser usados em elementos <a>, <button> ou <input>.

As letras nos botões serão convertidas para maiúsculas.

Como usar

O componente de botão é escrito em CSS puro, bastando escrever o código HTML para que ele funcione.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Botão

Estilo

Botão plano

Adicione a classe .mdui-btn aos elementos <a>, <button> ou <input> para obter o estilo de botão plano.

Exemplo

<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ão elevado

Adicionar a classe .mdui-btn-raised a um botão plano confere ao botão um efeito de elevação.

Exemplo

<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ão de ícone

Adicionar a classe .mdui-btn-icon a um botão plano o transforma em um botão de ícone.

Exemplo

<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ão denso

Os botões densos são ligeiramente menores do que os botões comuns, sendo adequados para cenários em que mouse e teclado são as principais formas de entrada. Basta adicionar a classe .mdui-btn-dense a um botão comum.

Exemplo

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

Adicione o atributo disabled a um botão para desabilitá-lo.

Exemplo

<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 em nível de bloco

Adicionar a classe .mdui-btn-block a um botão permite estendê-lo para 100% da largura do elemento pai, transformando o botão em um elemento de nível de bloco (block).

Exemplo

<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 botões

Colocar vários botões dentro de um contêiner de grupo de botões .mdui-btn-group cria um grupo de botões. Adicione a classe .mdui-btn-active em um botão para indicar que ele está no estado selecionado.

Exemplo

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

Nome da classe	Descrição
`.mdui-btn`	Define um botão
`.mdui-btn-raised`	Define um botão flutuante
`.mdui-btn-icon`	Define um botão de ícone
`.mdui-btn-block`	Define o botão como um elemento de nível de bloco
`.mdui-btn-group`	Contêiner para o grupo de botões
`.mdui-btn-active`	O botão no grupo de botões está no estado selecionado

Efeito ripple

Botão de ação flutuante