Button

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

Contained buttons

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">Contained</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" href="#contained-buttons">
  Link
</Button>

Você pode remover a elevação com a propriedade disableElevation.

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

Text buttons

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

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>Primary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons">Link</Button>

Outlined buttons

Botões delineados são botões com ênfase média. They contain actions that are important, but aren't the primary action in an app.

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">Primary</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" href="#outlined-buttons">
  Link
</Button>

Manipulando cliques

Todos os componentes aceitam um método manipulador onClick que é aplicado ao elemento DOM raiz.

<Button onClick={() => { alert('clicado') }}>Clique aqui</Button>

Note que a documentação evita mencionar as propriedades nativas (existem várias) na seção de API dos componentes.

Botão de upload

Upload

<label htmlFor="contained-button-file">
  <Input accept="image/*" id="contained-button-file" multiple type="file" />
  <Button variant="contained" component="span">
    Upload
  </Button>
</label>
<label htmlFor="icon-button-file">
  <Input accept="image/*" id="icon-button-file" type="file" />
  <IconButton color="primary" aria-label="upload picture" component="span">
    <PhotoCamera />
  </IconButton>
</label>

Tamanhos

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

Botões com ícones e rótulo

Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. Por exemplo, se você tem um botão com a ação de "deletar", você pode rotulá-lo com o ícone de lata de lixo.

<Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</Button>

Icon button

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

Ícones são também adequados para botões de alternância que permitem uma escolha única para ser selecionado ou desmarcado, 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 customizados

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

Os botões de progresso podem mostrar o estado de carregamento e desativar as interações.

<LoadingButton loading variant="outlined">
  Submit
</LoadingButton>
<LoadingButton loading loadingIndicator="Loading..." variant="outlined">
  Fetch data
</LoadingButton>
<LoadingButton
  loading
  loadingPosition="start"
  startIcon={<SaveIcon />}
  variant="outlined"
>
  Save
</LoadingButton>

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

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

Complex buttons

Os botões de texto, botões contidos, botões de ação flutuante e botões de ícone são construídos com base no mesmo componente: O componente ButtonBase. You can take advantage of this lower-level component to build custom interactions.

Biblioteca de roteamento de terceiros

Um caso de uso comum é usar o botão para acionar uma navegação para uma nova página. Um caso de uso comum é usar o botão para acionar uma navegação para uma nova página. 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

Propriedade CSS Cursor not-allowed

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:

Apenas com CSS. Você pode modificar os estilos aplicados no seletor de estado disabled do elemento <button>:

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

Então:

Você deve adicionar pointer-events: none; de volta quando você precisar exibir dicas em elementos desabilitados.
O cursor não irá mudar se você renderizar algum outro elemento que não seja um botão, por exemplo, um elemento link <a>.

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