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.