Pular para o conteúdo
Ajude a traduzir esta página

Botão

Botões permitem que os usuários tomem ações e decisões com um simples toque.

Botões comunicam ações que os usuários podem realizar. Eles são normalmente colocados em toda a interface do usuário, em lugares como:

  • Caixa de diálogo
  • Janelas modais
  • Formulários
  • Cartões
  • Barras de ferramentas

Botões Contidos

Botões Contidos tem alta ênfase, distinguem-se pelo uso de elevação e preenchimento. Eles contém as principais ações da sua aplicação.

Link
<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
  Primary
</Button>
<Button variant="contained" color="secondary">
  Secondary
</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
  Link
</Button>

Você pode remover a sombra com a propriedade disableElevation.

<Button variant="contained" color="primary" disableElevation>
  Disable elevation
</Button>

Botões de Texto

Botões de texto são utilizados tipicamente para ações menos-pronunciadas, incluindo aquelas localizadas em:

  • Caixas de diálogo
  • Cartões

Em cartões, os botões de texto ajudam a manter a ênfase no conteúdo do cartão.

Link
<Button>Default</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons" color="primary">
  Link
</Button>

Botões Delineados

Botões delineados são botões com ênfase média. Eles contém ações que são importantes, mas não são as ações primárias de um aplicativo.

Botões delineados são uma alternativa de menor ênfase comparado com botões contidos, ou uma uma alternativa de maior ênfase comparado com botões de texto.

Link
<Button variant="outlined">Default</Button>
<Button variant="outlined" color="primary">
  Primary
</Button>
<Button variant="outlined" color="secondary">
  Secondary
</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" color="primary" href="#outlined-buttons">
  Link
</Button>

Botão de Upload

Tamanhos

Gosta de botões maiores ou menores? Use a propriedade size.

Botões com ícones e rótulo

Às vezes você pode querer ter ícones para determinados botão para melhorar o UX do aplicativo como reconhecemos logotipos mais facilmente do que o texto sem formatação. Por exemplo, se você tem um botão com a açõo de "deletar" você pode rotulá-lo com um ícone do caixote de lixo.

Botões de Ícone

Botões de ícones são comumente encontrados em barras de aplicativos e barras de ferramentas.

Ícones são também adequadas para botões de alternância que permitem uma escolha única para ser selecionado ou desmarcada, como adicionar ou remover uma estrela para um item.

<IconButton aria-label="delete">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
  <DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
  <AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
  <AddShoppingCartIcon />
</IconButton>

Botões Personalizados

Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

👑 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.

Botões Complexos

O botões de texto, botões contidos, botões de ação flutuante e ícone botões são construídos em cima do mesmo componente: O componente ButtonBase. Você pode tirar vantagem deste componente de nível mais abastrato para construir interações personalizadas.

Biblioteca de roteamento de terceiros

Um caso de uso comum é usar o botão para acionar uma navegação para uma nova página. O componente ButtonBase fornece uma propriedade para lidar com este caso de uso: componente. No entanto, para alguns polyfills de foco ButtonBase requer o nó DOM do componente fornecido. Isso é obtido anexando-se uma referência ao componente e esperando que o componente envie essa referência para o nó DOM subjacente. Dado que muitos dos componentes interativos dependem do ButtonBase, você deve ser capaz de tirar proveito em todos os lugares.

Aqui está um exemplo de integração com react-router.

Limitações

Cursor não permitido

O componente ButtonBase define pointer-events: none; ao desabilitar os botões, o que previne que o cursor desabilitado seja exibido.

Se você deseja usar not-allowed, você tem duas opções:

  1. ** apenas CSS**. Você pode remover o estilo dos eventos do ponteiro no estado "desabilitado" do elemento <button> :

    .MuiButtonBase-root:disabled {
 cursor: not-allowed;
 pointer-events: auto;
}

Contudo:

  • Você deve adicionar eventos-ponteiro: nenhum; novamente quando você precisa exibir dicas ferramentas em elementos desabilitados.

    • O cursor não muda se você renderizar algum outro elemento de botão, por exemplo, um elemento link <a>.

  1. ** Alteração no DOM** Você pode encapsular o botão:

    <span style={{ cursor: 'not-allowed' }}>
 <Button component={Link} disabled>
   disabled
 </Button>
</span>

    Isso tem a vantagem de suportar qualquer elemento, por exemplo, um elemento de link <a>.

API