Material UI > Material UI Buttons

Material UI Buttons

In this article we're going to discuss Material UI's Button component. We'll discuss how to research the Button through Material UI's documentation. By doing so you'll become an expert in understanding the various properties and CSS rules, which you can happily apply to any Material UI component.

First, open up the Material UI's Button Component Page and the Button API so you can follow along with our investigation.

Starting on the Button Component Page, take a quick scroll down and view the available examples.

In general the examples all use the same Button component, but explore different values for the props, and mix in other components like icons and IconButtons.

Button variants

The first example renders some examples exploring the differences in using the variant prop. The default is the Text button (no variant prop. When variant="contained", we have the filled in Button. Finally, when variant is "outlined", the Button becomes outlined.

Button API

Rather than explain every prop these Buttons can have, let's now go over to the Button API. The first half of this page is going to list out all the props that the Button can receive. We've gone through all these props and created this example to the right which shows you what these props do.

Material UI IconButtons

To render a Button with a single Icon, check out our tutorial on the Material UI IconButton.

Lesson 2/12

import React from "react";
import { makeStyles } from "@mui/styles";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import SaveIcon from "@mui/icons-material/Save";
import Stack from "@mui/material/Stack";
import { lightGreen, blue, purple, pink } from "@mui/material/colors";

const defaultTheme = createTheme({
  palette: {
    primary: blue,
    secondary: pink,
  },
});

const customTheme = createTheme({
  palette: {
    primary: lightGreen,
    secondary: purple,
  },
});

export default function ContainedButtons() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Typography color="textSecondary" variant="h5">
        Material UI Buttons
      </Typography>
      <Container>
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>variant</Typography>
          <Button>Default (text)</Button>
          <Button variant="contained">contained</Button>
          <Button variant="outlined">outlined</Button>
        </Stack>
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>color</Typography>
          <Button color="primary" variant="contained">
            primary
          </Button>
          <Button color="secondary" variant="contained">
            secondary
          </Button>
        </Stack>
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>custom theme</Typography>
          <ThemeProvider theme={customTheme}>
            <div>
              <Button variant="contained">default (default)</Button>
              <Button color="primary" variant="contained">
                primary
              </Button>
              <Button color="secondary" variant="contained">
                secondary
              </Button>
            </div>
          </ThemeProvider>
        </Stack>
        <div>
          <Typography>size</Typography>
          <Button size="small" variant="contained" sx={{ margin: 1 }}>
            small
          </Button>
          <Button size="medium" variant="contained" sx={{ margin: 1 }}>
            medium (default)
          </Button>
          <Button size="large" variant="contained" sx={{ margin: 1 }}>
            large
          </Button>
        </div>
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>disabled</Typography>
          <Button disabled variant="contained">
            disabled
          </Button>
        </Stack>
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>disableElevation</Typography>
          <Button disableElevation variant="contained">
            disableElevation
          </Button>
        </Stack>
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>disableFocusRipple</Typography>
          <Button disableFocusRipple variant="contained">
            disableFocusRipple
          </Button>
        </Stack>{" "}
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>disableRipple</Typography>
          <Button disableRipple variant="contained">
            disableRipple
          </Button>
        </Stack>{" "}
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>endIcon</Typography>
          <Button endIcon={<SaveIcon />} variant="contained">
            endIcon
          </Button>
        </Stack>
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>startIcon</Typography>
          <Button startIcon={<SaveIcon />} variant="contained">
            startIcon
          </Button>
        </Stack>{" "}
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>fullWidth</Typography>
          <Button fullWidth variant="contained">
            fullWidth
          </Button>
        </Stack>{" "}
        <Stack direction="row" spacing={2} margin={1}>
          <Typography>href</Typography>
          <Button href="https://react.school" variant="contained">
            href
          </Button>
        </Stack>
      </Container>
    </ThemeProvider>
  );
}

Open Sandbox