Buttons

Use Material Kit's React custom button styles for actions in forms, dialogs, and more with support for multiple states, and more.

You will find all of our restyled buttons from material-ui in components/CustomButtons.

Styles

You will find the styles for this component in
styles/jss/nextjs-material-kit-pro/components/buttonStyle.js
and
styles/jss/nextjs-material-kit-pro/components/iconButtonStyle.js.

Examples

NextJS Material Kit PRO has changed the predefined button styles from Material UI, each serving its own semantic purpose, with a few extras thrown in for more control.

import Button from 'components/CustomButtons/Button.js';

<Button type="button">Default</Button>
<Button type="button" color="primary">Primary</Button>
<Button type="button" color="info">Info</Button>
<Button type="button" color="success">Success</Button>
<Button type="button" color="danger">Danger</Button>
<Button type="button" color="warning">Warning</Button>
<Button type="button" color="rose">Rose</Button>

Style Buttons

import Favorite from '@material-ui/icons/Favorite';
import Button from 'components/CustomButtons/Button.js';

<Button color="primary">Default</Button>
<Button color="primary" round>Round</Button>
<Button color="primary" round><Favorite /> With Icon</Button>
<Button justIcon round color="primary"><Favorite style={{ color: "#FFFFFF" }} /></Button>
<Button color="primary" simple>Simple</Button>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any Buttonelement.

<Button color="primary" disabled>Default</Button>
<Button color="primary" round disabled>Round</Button>

Social buttons

<Button color="twitter">
<i
  className={"fab fa-twitter"}
/>{" "}
  Connect with Twitter
</Button>
<Button color="twitter" justIcon>
<i className={ " fab fa-twitter"} />
</Button>
<Button justIcon round color="twitter">
<i
  className={"fab fa-twitter"}
/>
</Button>
<Button color="twitter" simple>
<i
  className={" fab fa-twitter"}
/>
</Button>
<Button color="twitter" simple>
<i
  className={" fab fa-twitter"}
/>{" "}
  Connect with Twitter
</Button>
<br />
<Button color="facebook">
<i
  className={" fab fa-facebook-square"}
/>{" "}
  Share · 2.2k
</Button>
<Button color="facebook" justIcon>
<i className={ " fab fa-facebook"} />
</Button>
<Button justIcon round color="facebook">
<i
  className={" fab fa-facebook"}
/>
</Button>
<Button color="facebook" simple>
<i
  className={" fab fa-facebook-square"}
/>
</Button>
<Button color="facebook" simple>
<i
  className={" fab fa-facebook-square"}
/>{" "}
  Share · 2.2k
</Button>
<br />
<Button color="google">
<i
  className={" fab fa-google-plus-square"}
/>{" "}
  Share on Google+
</Button>
<Button color="google" justIcon>
<i className={ " fab fa-google"} />
</Button>
<Button justIcon round color="google">
<i
  className={" fab fa-google"}
/>
</Button>
<Button color="google" simple>
<i
  className={" fab fa-google"}
/>
</Button>
<Button color="google" simple>
<i
  className={" fab fa-google-square"}
/>{" "}
  Share on Google+
</Button>
<br />
<Button color="github">
  <i
    className={" fab fa-github"}
  />{" "}
  Connect with Github
</Button>
<Button color="github" justIcon>
  <i className={ " fab fa-github"} />
</Button>
<Button justIcon round color="github">
  <i
    className={" fab fa-github"}
  />
</Button>
<Button color="github" simple>
  <i
    className={" fab fa-github"}
  />
</Button>
<Button color="github" simple>
  <i
    className={" fab fa-github"}
  />{" "}
  Connect with Github
</Button>

Properties

RegularButton.propTypes = {
  classes: PropTypes.object.isRequired,
  color: PropTypes.oneOf([
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "rose",
    "white",
    "facebook",
    "twitter",
    "google",
    "github",
    "transparent"
  ]),
  size: PropTypes.oneOf(["sm", "lg"]),
  simple: PropTypes.bool,
  round: PropTypes.bool,
  fullWidth: PropTypes.bool,
  disabled: PropTypes.bool,
  block: PropTypes.bool,
  link: PropTypes.bool,
  justIcon: PropTypes.bool
};

Material UI Buttons

For more props and buttons please check out the material-ui buttons section.