Material UI Button API

Last Updated : 04 Aug, 2022

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