ButtonBotão

Os botões são usados para executar ações, como enviar e-mails, compartilhar documentos ou curtir comentários.

Como usar

Importe o componente quando necessário:

import 'mdui/components/button.js';

Importe o tipo TypeScript do componente quando necessário:

import type { Button } from 'mdui/components/button.js';

Exemplo de uso:

Button

<mdui-button>Button</mdui-button>

Exemplos

Forma

Use o atributo variant para definir a forma do botão.

Elevated

Filled

Tonal

Outlined

Text

<mdui-button variant="elevated">Elevated</mdui-button>
<mdui-button variant="filled">Filled</mdui-button>
<mdui-button variant="tonal">Tonal</mdui-button>
<mdui-button variant="outlined">Outlined</mdui-button>
<mdui-button variant="text">Text</mdui-button>

Fonte

Largura total

Use o atributo full-width para fazer o botão ocupar toda a largura do elemento pai.

Button

<mdui-button full-width>Button</mdui-button>

Fonte

Ícone

Defina os atributos icon e end-icon para adicionar ícones do Material Icons à esquerda e à direita do botão, respectivamente. Você também pode adicionar elementos pelos slots icon e end-icon.

Icon

Slot

<mdui-button icon="search" end-icon="arrow_forward">Icon</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>

Fonte

Link

Defina o atributo href para transformar o botão em um link. Assim, você também pode usar os atributos relacionados a links: download, target, rel.

Link

<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>

Fonte

Estado desabilitado e carregando

Use o atributo disabled para desabilitar o botão; adicione o atributo loading para adicionar um estado de carregamento ao botão.

Disabled

Loading & Disabled

<mdui-button disabled>Disabled</mdui-button>
<mdui-button loading>Loading</mdui-button>
<mdui-button loading disabled>Loading & Disabled</mdui-button>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'elevated' \| 'filled' \| 'tonal' \| 'outlined' \| 'text'`	`'filled'`
Forma do botão. Os valores possíveis são: `elevated`: Botão com sombra, adequado para cenários onde o botão precisa ser visualmente separado do fundo. `filled`: Efeito visual forte, adequado para ações finais importantes, como "Salvar", "Confirmar", etc. `tonal`: Efeito visual entre `filled` e `outlined`, adequado para ações de prioridade média-alta, como "Próximo" em um fluxo. `outlined`: Botão com borda, adequado para ações de prioridade média e secundárias, como "Voltar". `text`: Botão de texto, adequado para ações de prioridade mais baixa.
`full-width`	`fullWidth`	`boolean`	`false`
Define se o botão deve preencher a largura do elemento pai.
`icon`	`icon`	`string`	-
Nome do ícone Material Icons à esquerda. Também pode ser definido via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome do ícone Material Icons à direita. Também pode ser definido via `slot="end-icon"`.
`href`	`href`	`string`	-
A URL de destino do link. Ao definir esta propriedade, o componente será renderizado internamente como um elemento `<a>` e poderá usar atributos de link.
`download`	`download`	`string`	-
O nome do arquivo para download. Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Define como o link será aberto. Os valores possíveis são: `_blank`: Abre o link em uma nova janela `_parent`: Abre o link no frame pai `_self`: Padrão. Abre o link no frame atual `_top`: Abre o link na janela inteira Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
A relação entre o documento atual e o documento vinculado. Os valores possíveis são: `alternate`: Versão alternativa do documento atual `author`: Autor do documento atual ou artigo `bookmark`: Link permanente para a seção ancestral mais próxima `external`: O documento referenciado não está no mesmo site do documento atual `help`: Link para documentação de ajuda relacionada `license`: O conteúdo principal do documento atual está coberto pela licença de direitos autorais do arquivo referenciado `me`: O documento atual representa o proprietário do conteúdo vinculado `next`: O documento atual faz parte de uma série, e o documento referenciado é o próximo da série `nofollow`: O autor ou editor do documento atual não endossa o arquivo referenciado `noreferrer`: Não inclui o cabeçalho `Referer`. Tem efeito semelhante ao `noopener` `opener`: Se o hiperlink criar um contexto de navegação de nível superior (ou seja, o valor do atributo `target` for `_blank`), cria um contexto de navegação auxiliar `prev`: O documento atual faz parte de uma série, e o documento referenciado é o anterior da série `search`: Fornece um link para um recurso que pode ser usado para pesquisar o arquivo atual e suas páginas relacionadas `tag`: Fornece uma tag (identificada pelo endereço fornecido) aplicável ao documento atual Nota: Disponível apenas quando o atributo `href` é especificado.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.
`disabled`	`disabled`	`boolean`	`false`
Define se o componente está desabilitado.
`loading`	`loading`	`boolean`	`false`
Define se o componente está em estado de carregamento.
`name`	`name`	`string`	`''`
O nome do botão, que será enviado com os dados do formulário. Nota: Esta propriedade só é válida quando o atributo `href` não está definido.
`value`	`value`	`string`	`''`
O valor inicial do botão, que será enviado com os dados do formulário. Nota: Esta propriedade só é válida quando o atributo `href` não está definido.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
O tipo do botão. O tipo padrão é `button`. Os tipos possíveis são: `submit`: Clicar no botão envia os dados do formulário para o servidor `reset`: Clicar no botão redefine todos os campos do formulário para seus valores iniciais `button`: Este tipo de botão não tem comportamento padrão Nota: Esta propriedade só é válida quando o atributo `href` não é especificado.
`form`	`form`	`string`	-
O elemento `<form>` associado. O valor deste atributo deve ser o `id` de um elemento `<form>` na mesma página. Se este atributo não for especificado, o elemento precisa ser um elemento filho de um `<form>`. Com este atributo, você pode colocar o elemento em qualquer lugar da página, não apenas como filho do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é especificado.
`formaction`	`formAction`	`string`	-
Especifica a URL para envio do formulário. Se este atributo for especificado, ele substituirá o atributo `action` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é especificado e `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Especifica o tipo de conteúdo ao enviar o formulário para o servidor. Os valores possíveis são: `application/x-www-form-urlencoded`: Valor padrão quando o atributo não é especificado `multipart/form-data`: Usado quando o formulário contém um elemento `<input type="file">` `text/plain`: Novo no HTML5, usado para depuração Se este atributo for especificado, ele substituirá o atributo `enctype` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é especificado e `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Especifica o método HTTP a ser usado ao enviar o formulário. Os valores possíveis são: `post`: Os dados do formulário são incluídos no corpo do formulário e enviados ao servidor `get`: Os dados do formulário são anexados à URI do formulário com `?` como separador, e a URI resultante é enviada ao servidor. Use este método quando o formulário não tiver efeitos colaterais e contiver apenas caracteres ASCII Se este atributo for definido, ele substituirá o atributo `method` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é definido e `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Se este atributo for definido, a validação do formulário não será executada ao enviar. Se este atributo for definido, ele substituirá o atributo `novalidate` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é definido e `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Onde exibir a resposta recebida após o envio do formulário. Os valores possíveis são: `_self`: Opção padrão, abre no frame atual `_blank`: Abre em uma nova janela `_parent`: Abre no frame pai `_top`: Abre na janela inteira Se este atributo for definido, ele substituirá o atributo `target` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é definido e `type="submit"`.
	`validity`	`ValidityState`	-
Objeto que representa o estado de validação do formulário. Consulte `ValidityState` para mais detalhes.
	`validationMessage`	`string`	-
Se a validação do formulário falhar, esta propriedade conterá uma mensagem de erro. Se a validação for bem-sucedida, esta propriedade será uma string vazia.

Métodos

Nome	Parâmetros	Retorno
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.
`checkValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`.
`reportValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`. Se a validação falhar, também exibe uma mensagem de erro no componente.
`setCustomValidity`	`message: string`	`void`
Define um texto de erro personalizado. Enquanto este texto não estiver vazio, indica que o campo não passou na validação.

Eventos

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.
`invalid`
Disparado quando a validação do campo do formulário falha.

Slots

Nome
(padrão)
Texto do botão.
`icon`
Elemento à esquerda do botão.
`end-icon`
Elemento à direita do botão.

CSS Parts

Nome
`button`
Elemento `<button>` ou `<a>` interno.
`label`
Texto do botão.
`icon`
Ícone à esquerda do botão.
`end-icon`
Ícone à direita do botão.
`loading`
Elemento `<mdui-circular-progress>` no estado de carregamento.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

BottomAppBar Barra de aplicativo inferior

Próximo capítulo

ButtonIcon Botão de ícone