Material UI Button API

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

Output:

Reference: https://material-ui.com/api/button/