Material UI Button Component - GeeksforGeeks

14 Apr, 2021
Material-UI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Typography component in the Material-UI library.
Buttons are one of the ways in which user communicates in the application. Material UI provides a customizable <Button/> component that can be used for several purposes through its props.
Syntax:
<Button> This ia a Button </Button> 
Installing React App:
Step1: Create a React app using the following command.npx create-react-app button-example
Step1: Create a React app using the following command.
npx create-react-app button-example
Step 2: Now get into the project directorycd button-example
Step 2: Now get into the project directory
cd button-example
Installing Material-UI: Installing Material-UI’s source files via npm/yarn, and they take care of injecting the CSS needed.
npm install @material-ui/core
OR
yarn add @material-ui/core
Importing AppBar and Toolbar:
import Button from '@material-ui/core/Button';
Contained Buttons: Contained buttons use elevation and fill to give high-emphasis to the users. They are of several types
Default
Primary
Secondary
Link
Disabled
Props list:
children: It is the content of the button.
classes: It is to override or extend the styles applied to the component.
size: It is used to customize the size of the button.
disableElevation: It is the boolean value to determine the elevation for the button.
fullWidth: It is the boolean value that determines whether it covers the entire width of the container or not.
disabled: It is the Boolean value to enable or disable the button.
disableElevation:  It is the boolean value to enable or disable the button’s elevated appearance.
disableFocusRipple: It is the boolean value to enable or disable the keyboard focus ripple effect.
startIcon: Element before the children.
endIcon: Element after the children.
href: Its URL to link to when the button is clicked.
color: It is the color of the component.
disableRipple: It is the boolean value to disable or enable the ripple effect.
Example:
App.js
import React from 'react';import { makeStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';import Typography from '@material-ui/core/Typography';  const useStyles = makeStyles((theme) => ({  root: {    textAlign: "center",    marginTop: "50px"  },  btns:{      '& > *': {      margin: theme.spacing(1),    },      marginTop: "40px"  }}));  export default function SimpleContainer() {  const classes = useStyles();    return (    <div className={classes.root}>      <Typography variant="h4" component="h4">          Welcome to GFG      </Typography>      <div className={classes.btns}>        <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>      </div>    </div>  );}
Output:
Text Buttons: Text Buttons are more emphasized on the content of the button rather than the appearance of the button.
Example:
App.js
import React from 'react';import { makeStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';import Typography from '@material-ui/core/Typography';  const useStyles = makeStyles((theme) => ({  root: {    textAlign: "center",    marginTop: "50px"  },  btns:{      '& > *': {      margin: theme.spacing(1),    },      marginTop: "40px"  }}));  export default function SimpleContainer() {      const classes = useStyles();    return (    <div className={classes.root}>        <Typography variant="h4" component="h4">              Welcome to GFG            </Typography>            <div className={classes.btns}>      <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>      </div>    </div>  );}
Output:
Outlined Buttons: They are text buttons wrapped with a border
Example:
App.js
import React from 'react';import { makeStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';import Typography from '@material-ui/core/Typography';  const useStyles = makeStyles((theme) => ({  root: {    textAlign: "center",    marginTop: "50px"  },  btns:{      '& > *': {      margin: theme.spacing(1),    },      marginTop: "40px"  }}));  export default function SimpleContainer() {      const classes = useStyles();    return (    <div className={classes.root}>      <Typography variant="h4" component="h4">          Welcome to GFG      </Typography>      <div className={classes.btns}>        <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>      </div>    </div>  );}
Output:
Reference: https://material-ui.com/api/button/
Material-UI
Picked
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set background images in ReactJS ?
How to navigate on path by button click in react router ?
How to create a table in ReactJS ?
ReactJS useNavigate() Hook
Axios in React: A Guide for Beginners
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Convert a string to an integer in JavaScript