Os botões permitem que os usuários realizem ações e façam escolhas com um único toque.

Eles (botões) comunicam as ações que os usuários podem realizar. Ele é colocado pela sua IU em locais como abaixo:

• Janelas modais
• Formulários
• Cartões
• Barras de ferramentas
• Botão Básico

O botão vem em 3 variantes: texto (padrão), contido, e delineado.

 import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function BasicButtons() { return ( Text Contained Outlined ); } 

Botão de texto

Botões de texto são usados ​​para ações menos pronunciadas, incluindo aquelas em caixas de diálogo de cartões. Nos cartões, os botões de texto nos ajudarão a manter a ênfase no conteúdo do cartão.

 import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function TextButtons() { return ( Primary Disabled Link ); } 

Botão contido

Os botões contidos são de alta ênfase, diferenciados pelo uso de elevação e preenchimento. Ele contém ações que são usadas principalmente em nosso aplicativo.

exemplo java olá mundo

 import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function ContainedButtons() { return ( Contained Disabled Link ); } 

Você pode remover a elevação com a opção desativar Elevação.

 import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } 

Botão delineado

Os botões delineados são botões de ênfase média. Eles contêm ações essenciais, mas não a ação principal do aplicativo.

Os botões delineados são a alternativa inferior para conter os botões ou uma alternativa de maior ênfase aos botões de texto.

 import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function OutlinedButtons() { return ( Primary Disabled Link ); } 

Tratamento de cliques

Todos os componentes aceitam um onClick manipulador que é aplicado à raiz DOM elemento.

 { alert('clicked'); }} > Click me 

Nota: A documentação evita mencionar os adereços nativos em nossa seção API dos componentes.

Cor

 import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function ColorButtons() { return ( Secondary Success Error ); } 

Além disso, usando as cores padrão dos botões, você pode adicionar opções personalizadas ou desativar aquelas que não precisa.

Tamanho

Use esta propriedade para botões maiores ou menores.

Botão de upload

 import * as React from 'react'; import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import PhotoCamera from '@mui/icons-material/PhotoCamera'; import Stack from '@mui/material/Stack'; const Input = styled('input')({ display: 'none', }); export default function UploadButtons() { return ( Upload ); } 

Botões com rótulo e ícone

Às vezes, você pode querer ter ícones para determinados botões para aprimorar a experiência do usuário do aplicativo, pois reconhecemos logotipos mais facilmente do que texto simples.

tupla ordenada python

Por exemplo, Se quisermos excluir o botão, você deve rotulá-lo com um ícone de lixeira.

 import * as React from &apos;react&apos;; import Button from &apos;@mui/material/Button&apos;; import DeleteIcon from &apos;@mui/icons-material/Delete&apos;; import SendIcon from &apos;@mui/icons-material/Send&apos;; import Stack from &apos;@mui/material/Stack&apos;; export default function IconLabelButtons() { return ( <button variant="outlined" starticon="{}"> Delete </button><button variant="contained" endicon="{}"> Send ); } </button>

Botão de ícone

Os botões de ícone são encontrados em barras de ferramentas e barras de aplicativos. Os ícones são apropriados para botões de alternância que permitem que as opções sejam selecionadas ou desmarcadas. Tipo, adicionar ou remover qualquer item da etiqueta.

 import * as React from 'react'; import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; import DeleteIcon from '@mui/icons-material/Delete'; import AlarmIcon from '@mui/icons-material/Alarm'; import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; export default function IconButtons() { return ( ); } 

Tamanhos

Use o suporte de tamanho para um ícone maior ou menor no botão.

 import * as React from 'react'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; import DeleteIcon from '@mui/icons-material/Delete'; export default function IconButtonSizes() { return ( ); } 

Cores

Use color prop para aplicar a paleta de cores do tema ao componente.

 import * as React from 'react'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; import Fingerprint from '@mui/icons-material/Fingerprint'; export default function IconButtonColors() { return ( ); } 

Costumização

Abaixo estão os exemplos de personalização de nosso componente.

Botão de carregamento

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

 import * as React from &apos;react&apos;; import LoadingButton from &apos;@mui/lab/LoadingButton&apos;; import SaveIcon from &apos;@mui/icons-material/Save&apos;; import Stack from &apos;@mui/material/Stack&apos;; export default function LoadingButtons() { return ( Submit Fetch data <loadingbutton loading loadingposition="start" starticon="{}" variant="outlined"> Save ); } </loadingbutton>

Alterne o botão de carregamento para ver a transição entre posições não relacionadas.

Botão complexo

Botão de ícone, botão de texto, botões contidos e botões de ação flutuantes são integrados em um único componente chamado ButtonBase.

pivô do servidor sql

Você pode usar componentes de nível inferior para criar interações personalizadas.

Bibliotecas de roteamento de terceiros

Navegar no cliente sem uma viagem HTTP exata ao servidor é um caso de uso exclusivo. O componente ButtonBase fornece propriedades de componente para lidar com o caso de uso.

Fronteiras

ButtonBase define o componente pointer-events: none; no botão desabilitar, que evita o aparecimento do cursor desabilitado.

Se você quiser usar 'não permitido' , você tem duas opções:

Apenas CSS: Você pode remover o estilo de evento de ponteiro no estado desativado de elemento:

 .uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , 

Embora,

java obtém a data atual

Você deve adicionar eventos de ponteiro: nenhum; quando você precisava exibir dicas de ferramentas sobre elementos desabilitados.

Se você renderizar algo diferente do elemento botão, o cursor não mudará. Por exemplo, um link elemento.

Mudança de DOM. Você pode quebrar o botão:

 <span style="{{" cursor: 'not allowed' }}> disabled </span> 

Pode suportar qualquer elemento, por exemplo, um link elemento.

sem estilo

O componente virá com a versão sem estilo. É ideal para fazer otimizações pesadas e reduzir o tamanho do pacote.

API

Como usar o componente de botão no ReactJS?

Os botões permitem que os usuários realizem suas ações e façam escolhas com um único toque. Este componente está disponível para conteúdo do React UI e é muito fácil de integrar. Podemos usar o componente de botão no ReactJS usando a seguinte abordagem.

Criando aplicativo react e instalando módulos:

Passo 1: Crie um aplicativo React usando o comando abaixo:

obj em java

 npx create-react-app foldername 

Passo 2: Após criar a pasta do projeto e o nome da pasta para navegar usando o comando fornecido:

 cd foldername 

Etapa 3: Instale o UI do material módulo usando o seguinte comando, após criar o aplicativo ReactJS:

 npm install @material-ui/core 

Estrutura do Projeto: Será parecido com o seguinte.

estrutura do projeto

Aplicativo.js: Agora, você deve escrever o código abaixo no Aplicativo.js arquivo.

Aqui, o App é o componente padrão onde escrevemos em nosso código.

JavaScript

 import React from &apos;react&apos;; import Button from &apos;@material-ui/core/Button&apos;; const App = () =&gt; { return ( <h3>How to use Button Component in ReactJS?</h3> <br> Default Button Primary Button Secondary Button Disabled Button Link Button ); } export default App; 

Etapas para executar o aplicativo:

Execute o aplicativo usando o comando do diretório raiz do projeto:

 npm start 

Saída: Agora abra seu navegador e vá para http://localhost:3000/. Você pode ver a saída abaixo: