Categories
Material UI

Material UI — Buttons and Groups

Spread the love

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.

Complex Buttons

We can add more complex buttons with the ButtonBase component.

For instance, we can write:

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

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  },
  image: {
    position: "relative",
    height: 200,
    [theme.breakpoints.down("xs")]: {
      width: "100% !important",
      height: 100
    },
    "&:hover, &$focusVisible": {
      zIndex: 1,
      "& $imageBackdrop": {
        opacity: 0.15
      },
      "& $imageMarked": {
        opacity: 0
      },
      "& $imageTitle": {
        border: "4px solid currentColor"
      }
    }
  },
  focusVisible: {},
  imageButton: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: theme.palette.common.white
  },
  imageSrc: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundSize: "cover",
    backgroundPosition: "center 40%"
  },
  imageBackdrop: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundColor: theme.palette.common.black,
    opacity: 0.4,
    transition: theme.transitions.create("opacity")
  },
  imageTitle: {
    position: "relative",
    padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) +
      6}px`
  },
  imageMarked: {
    height: 3,
    width: 18,
    backgroundColor: theme.palette.common.white,
    position: "absolute",
    bottom: -2,
    left: "calc(50% - 9px)",
    transition: theme.transitions.create("opacity")
  }
}));

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

  return (
    <div className={classes.root}>
      <ButtonBase
        focusRipple
        className={classes.image}
        focusVisibleClassName={classes.focusVisible}
        style={{
          width: "200px"
        }}
      >
        <span
          className={classes.imageSrc}
          style={{
            backgroundImage: `url(http://placekitten.com/200/200)`
          }}
        />
        <span className={classes.imageBackdrop} />
        <span className={classes.imageButton}>
          <Typography
            component="span"
            variant="subtitle"
            color="inherit"
            className={classes.imageTitle}
          >
            {"Cat"}
            <span className={classes.imageMarked} />
          </Typography>
        </span>
      </ButtonBase>
    </div>
  );
}

We set the classes for the ButtonBase with the image class.

focusVisibleClassName has the focusVisible class.

imageBackdrop has its own class.

imageButton has the button class.

And imageMarked has the image class has the bar at the bottom.

We follow the styles from the Material UI documentation to start, and then we modify them from that.

We set many things to an absolute position to place them in the button base.

The image title is relative to the spacing.

Button Groups

We can add button groups to add buttons in one container.

For instance, we can write:

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

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

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

  return (
    <div className={classes.root}>
      <ButtonGroup color="primary">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>
    </div>
  );
}

We add our Button s in our ButtonGroup s to group them together.

Sizes and Colors of Button Groups

We can change the size and colors of button groups.

For example, we can write:

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

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

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

  return (
    <div className={classes.root}>
      <ButtonGroup size="large" color="primary">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>
    </div>
  );
}

to make the size large.

Vertical Group

To make the button group vertical, we can set the orientation to vertical .

For example, we can write:

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

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

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

  return (
    <div className={classes.root}>
      <ButtonGroup orientation="vertical" color="primary">
        <Button>foo</Button>
        <Button>bar</Button>
        <Button>baz</Button>
      </ButtonGroup>
    </div>
  );
}

Split Button

We can make a split button by putting 2 buttons together.

For example, we can write:

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

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

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

  return (
    <div className={classes.root}>
      <ButtonGroup color="primary">
        <Button>foo</Button>
        <Button color="primary" size="small">
          <ArrowDropDownIcon />
        </Button>
      </ButtonGroup>
    </div>
  );
}

We add the ArrowDropDownIcon to add an icon to the r8ight button.

size is small to make it smaller than the left one.

Conclusion

We can make complex buttons with the ButtonBase component.

And we can group buttons together with the ButtonGroup component.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *