Material-UI Buttons

Use Material-ui buttons and Material-ui custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.

Examples

Material-UI includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

import React from "react";
// @material-ui/core components
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
// @material-ui/icons components
import Archive from "@material-ui/icons/Archive";
import Grain from "@material-ui/icons/Grain";
// core components

function Example() {
  return (
    <>
      <Button color="primary" variant="contained">
        Button
      </Button>
      <br />
      <br />
      <Button color="primary" variant="contained">
        <Box
          component={Archive}
          marginRight=".75em"
          top="2px"
          position="relative"
        />
        With Icons
      </Button>
      <br />
      <br />
      <Button color="primary" variant="contained">
        <Box
          component={Grain}
          top="2px"
          position="relative"
        />
      </Button>
    </>
  );
}

export default Example;

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

// core components
import componentStyles from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const buttonInfoClasses = {
    root: classes.buttonContainedInfo,
  };
  const buttonSuccessClasses = {
    root: classes.buttonContainedSuccess,
  };
  const buttonErrorClasses = {
    root: classes.buttonContainedError,
  };
  const buttonWarningClasses = {
    root: classes.buttonContainedWarning,
  };
  return (
    <>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="contained">Default</Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button color="primary" variant="contained">
          Primary
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button color="secondary" variant="contained">
          Secondary
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="contained" classes={buttonInfoClasses}>
          Info
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="contained" classes={buttonSuccessClasses}>
          Success
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="contained" classes={buttonErrorClasses}>
          Error
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="contained" classes={buttonWarningClasses}>
          Warning
        </Button>
      </Box>
    </>
  );
}

export default Example;

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier styles by adding outlined variant prop to remove all background images and colors on any button.

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

// core components
import componentStyles from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const buttonInfoClasses = {
    root: classes.buttonOutlineInfo,
  };
  const buttonSuccessClasses = {
    root: classes.buttonOutlineSuccess,
  };
  const buttonErrorClasses = {
    root: classes.buttonOutlineError,
  };
  const buttonWarningClasses = {
    root: classes.buttonOutlineWarning,
  };
  return (
    <>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="outlined">Default</Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button color="primary" variant="outlined">
          Primary
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button color="secondary" variant="outlined">
          Secondary
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="outlined" classes={buttonInfoClasses}>
          Info
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="outlined" classes={buttonSuccessClasses}>
          Success
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="outlined" classes={buttonErrorClasses}>
          Error
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button variant="outlined" classes={buttonWarningClasses}>
          Warning
        </Button>
      </Box>
    </>
  );
}

export default Example;

Sizes

Fancy larger or smaller buttons? Add size="large" or size="small" for additional sizes.

import React from "react";
// @material-ui/core components
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
// @material-ui/icons components

// core components

function Example() {
  return (
    <>
      <Box display="inline-block" marginRight="1rem">
        <Button size="small" color="primary" variant="contained">
          Small button
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button size="small" color="secondary" variant="contained">
          Small button
        </Button>
      </Box>
    </>
  );
}

export default Example;

Create block level buttons—those that span the full width of a parent—by adding fullWidth prop.

import React from "react";
// @material-ui/core components
import Button from "@material-ui/core/Button";
// @material-ui/icons components

// core components

function Example() {
  return (
    <>
      <Button color="primary" variant="contained" fullWidth>
        Block level
      </Button>
      <br />
      <br />
      <Button color="secondary" variant="contained" fullWidth>
        Block level
      </Button>
    </>
  );
}

export default Example;

Active state

If you want to add active states to your buttons, we’ve created the following classes buttonActive, buttonActivePrimary, buttonActiveSecondary, buttonActiveInfo, buttonActiveSuccess, buttonActiveError, buttonActiveWarning.

Primary link Link

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

// core components
import componentStyles from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const buttonPrimaryClasses = {
    root: classes.buttonActivePrimary,
  };
  const buttonSecondaryClasses = {
    root: classes.buttonActiveSecondary,
  };
  return (
    <>
      <Box display="inline-block" marginRight="1rem">
        <Button
          color="primary"
          variant="contained"
          classes={buttonPrimaryClasses}
        >
          Primary link
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button
          color="secondary"
          variant="contained"
          classes={buttonSecondaryClasses}
        >
          Link
        </Button>
      </Box>
    </>
  );
}

export default Example;

Disabled state

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

// core components
import componentStyles from "assets/theme/components/button.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const buttonPrimaryClasses = {
    root: classes.buttonDisabled,
  };
  const buttonSecondaryClasses = {
    root: classes.buttonDisabled,
  };
  return (
    <>
      <Box display="inline-block" marginRight="1rem">
        <Button
          color="primary"
          variant="contained"
          classes={buttonPrimaryClasses}
        >
          Primary link
        </Button>
      </Box>
      <Box display="inline-block" marginRight="1rem">
        <Button
          color="secondary"
          variant="contained"
          classes={buttonSecondaryClasses}
        >
          Link
        </Button>
      </Box>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Material-UI Documentation.