Les boutons permettent aux utilisateurs d'effectuer des actions et de faire des choix en un seul clic.

Ils (boutons) communiquent les actions que les utilisateurs peuvent effectuer. Il est placé par votre interface utilisateur aux endroits suivants :

• Fenêtres modales
• Formes
• Cartes
• Barres d'outils
• Bouton de base

Le Bouton se décline en 3 variantes : texte (par défaut), contenu, et décrit.

 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 ); } 

Bouton texte

Les boutons de texte sont utilisés pour les actions moins prononcées, y compris celles des boîtes de dialogue de cartes. Dans les cartes, les boutons de texte nous aideront à mettre l'accent sur le contenu de la carte.

 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 ); } 

Bouton contenu

Les boutons contenus sont fortement accentués, se distinguant par l'utilisation de l'élévation et du remplissage. Il contient des actions qui sont principalement utilisées dans notre application.

 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 ); } 

Vous pouvez supprimer l'élévation avec l'accessoire de désactivation d'élévation.

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

Bouton souligné

Les boutons encadrés sont des boutons d’accentuation moyenne. Ils contiennent des actions essentielles mais pas l'action principale de l'application.

objet de tableau en Java

Les boutons soulignés sont l'alternative inférieure pour contenir les boutons ou une alternative plus accentuée aux boutons de texte.

 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 ); } 

Gestion des clics

Tous les composants acceptent un sur clic gestionnaire qui est appliqué à la racine DOMAINE élément.

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

Remarque : La documentation évite de mentionner les accessoires natifs dans notre section API des composants.

Couleur

 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 ); } 

De plus, en utilisant les couleurs des boutons par défaut, vous pouvez ajouter des couleurs personnalisées ou désactiver celles dont vous n'avez pas besoin.

Taille

Utilisez cette propriété pour les boutons plus grands ou plus petits.

Bouton de téléchargement

 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 ); } 

Boutons avec étiquette et icône

Parfois, vous souhaiterez peut-être avoir des icônes pour certains boutons afin d'améliorer l'UX de l'application, car nous reconnaissons plus facilement les logos que le texte brut.

Par exemple, Si nous voulons supprimer le bouton, vous devez l’étiqueter avec une icône de poubelle.

 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>

Bouton icône

Les boutons d’icônes se trouvent dans les barres d’outils et les barres d’applications. Les icônes conviennent aux boutons à bascule qui permettent de sélectionner ou de désélectionner les choix. Comme ajouter ou supprimer n’importe quel élément de l’étiquette.

 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 ( ); } 

Tailles

Utilisez l'accessoire de taille pour une icône plus grande ou plus petite dans le bouton.

 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 ( ); } 

Couleurs

Utilisez l'accessoire de couleur pour appliquer la palette de couleurs du thème au composant.

 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 ( ); } 

Personnalisation

Vous trouverez ci-dessous les exemples de personnalisation de notre composant.

Bouton de chargement

Les boutons de chargement peuvent afficher l'état de chargement et désactiver les interactions du bouton.

 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>

Basculez le bouton de chargement pour voir la transition entre des positions non liées.

Bouton complexe

Le bouton Icône, le bouton Texte, les boutons contenus et les boutons d'action flottants sont intégrés dans un seul composant appelé ButtonBase.

Vous pouvez utiliser un composant de niveau inférieur pour créer des interactions personnalisées.

Bibliothèques de routage tierces

Naviguer dans le client sans un trajet HTTP exact vers le serveur est un cas d'utilisation unique. Le composant ButtonBase fournit des propriétés de composant pour gérer le cas d'utilisation.

Les frontières

ButtonBase définit les événements de pointeur du composant : aucun ; sur le bouton de désactivation, qui empêche l'apparition du curseur désactivé.

Si vous souhaitez utiliser 'interdit' , vous avez deux options :

CSS uniquement : Vous pouvez supprimer le style d'événement de pointeur sur l'état désactivé de élément:

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

Bien que,

Vous devez ajouter des événements de pointeur : aucun ; lorsque vous deviez afficher des info-bulles sur des éléments désactivés.

Si vous restituez autre chose que l'élément bouton, le curseur ne changera pas. Par exemple, un lien élément.

Changement de DOM. Vous pouvez envelopper le bouton :

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

Il peut prendre en charge n'importe quel élément, par exemple un lien élément.

sans style

méthode tostring

Le composant sera livré avec la version sans style. Il est idéal pour effectuer des optimisations lourdes et réduire la taille du bundle.

API

Comment utiliser le composant bouton dans ReactJS ?

Les boutons permettent aux utilisateurs d'effectuer leurs actions et de faire des choix en un seul clic. Ce composant est à notre disposition pour le contenu de React UI, et il est très simple à intégrer. Nous pouvons utiliser le composant bouton dans ReactJS en utilisant l'approche suivante.

Création de l'application React et installation des modules :

Étape 1: Créez une application React en utilisant la commande ci-dessous :

 npx create-react-app foldername 

Étape 2: Après avoir créé le dossier du projet et le nom du dossier pour y naviguer à l'aide de la commande donnée :

 cd foldername 

Étape 3: Installez le Matériel-UI module à l'aide de la commande suivante, après avoir créé l'application ReactJS :

 npm install @material-ui/core 

Structure du projet : Cela ressemblera à ce qui suit.

structure du projet

App.js : Maintenant, vous devez écrire le code ci-dessous dans le App.js déposer.

Ici, l'application est le composant par défaut dans lequel nous avons écrit notre code.

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; 

Étapes pour exécuter l'application :

Exécutez l'application en utilisant la commande du répertoire racine du projet :

 npm start 

Sortir: Maintenant, ouvrez votre navigateur et accédez à http://localhost:3000/. Vous pouvez voir le résultat ci-dessous :