Material UI — Buttons

Material UI is a Material Design library made for React. It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add buttons Material Design.

Button

We can add buttons with the Button component.

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <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>
  );
}

to add a variety of buttons.

We just add the Button prop with the variant to set the variant of the button.

color lets us change the color.

disabled lets us disabled a button.

href lets us add a URL for the link.

We added some spaces to the buttons with the theme.spacing in the makeStyles call.

Text Buttons

We can create text buttons to remove the outline.

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <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>
  );
}

to add a variety of text buttons.

We removed the variant to make them text buttons.

Outlined Buttons

We can make buttons display an outline only with the variant prop.

For example, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <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>
  );
}

to make them display an outline only.

variant is set to outline to make them that.

Handling Clicks

To handle clicks, we can pass in an event handler to the onClick prop.

For example, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Button
        onClick={() => {
          alert("clicked");
        }}
      >
        click me
      </Button>
    </div>
  );
}

Then we see the clicked alert when we click on the button.

We can add a button for uploading files.

To add one, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  },
  input: {
    display: "none"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <input
        accept="image/*"
        className={classes.input}
        id="button-file"
        multiple
        type="file"
      />
      <label htmlFor="button-file">
        <Button variant="contained" color="primary" component="span">
          Upload
        </Button>
      </label>
    </div>
  );
}

We hide the regular HTML file upload input with the display: 'none' .

Then we add the file input and the button in the JSX expression.

The id should match the htmlFor value. This way, we can see the file selection dialog when we click on the button.

Sizes

Buttons can have a variety of sizes.

For instance, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Button size="small" className={classes.margin}>
        Small
      </Button>
      <Button size="medium" className={classes.margin}>
        Medium
      </Button>
      <Button size="large" className={classes.margin}>
        Large
      </Button>
    </div>
  );
}

We use the size prop with the small , medium or large values to change the sizes of the buttons.

Conclusion

We can do many things with buttons.

The size can be changed.

We can also add outlines and fill for our buttons.

And upload button can be added.