Buttons

Use NextJS Material Kit's 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 src/components/CustomButtons.

Styles

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

Examples

NextJS Material Kit 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.jsx';

<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.jsx';

<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 Button element.

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

Social buttons

import React from "react";
// material-ui components
// @material-ui/icons
// core components
import Button from 'components/CustomButtons/Button.jsx';

export default function Socials(){
  return (
    <div>
      <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>
    </div>
  );
}

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.