Nextjs Core Buttons

Pro Component

We’ve worked over the original Material-UI buttons, choosing a different, slightly intenser colour palette.

Style

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

Examples

Colors

import React from "react";

// @material-ui/core components

// @material-ui/icons

// core components
import Button from "components/CustomButtons/Button.js";

function Examples() {
  return (
    <>
      <Button>Default</Button>
      <Button color="primary">Primary</Button>
      <Button color="info">Info</Button>
      <Button color="success">Success</Button>
      <Button color="warning">Warning</Button>
      <Button color="danger">Danger</Button>
      <Button color="rose">Rose</Button>
    </>
  );
}

export default Examples;

Styles

<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 /></Button>
<Button simple color="primary">simple</Button>

Sizes

import React from "react";

// @material-ui/core components

// @material-ui/icons

// core components
import Button from "components/CustomButtons/Button.js";

function Examples() {
  return (
    <>
      <Button color="primary" size="lg">Large</Button>
      <Button color="primary">Normal</Button>
      <Button color="primary" size="sm">Small</Button>
    </>
  );
}

export default Examples;

Socials PRO

import React from "react";

// @material-ui/core components

// @material-ui/icons

// core components
import Button from "components/CustomButtons/Button.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

function Examples() {
  return (
    <>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="twitter">
            <i className="fab fa-twitter" /> Connect with Twitter
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="twitter">
            <i className="fab fa-twitter" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="twitter">
            <i className="fab fa-twitter" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button simple justIcon color="twitter">
            <i className="fab fa-twitter" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button simple color="twitter">
            <i className="fab fa-twitter" /> Connect with Twitter
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="facebook">
            <i className="fab fa-facebook-square" /> Share · 2.2k
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="facebook">
            <i className="fab fa-facebook" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="facebook">
            <i className="fab fa-facebook" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="face" simple>
            <i className="fab fa-facebook-square" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="facebook" simple>
            <i className="fab fa-facebook-square" /> Share · 2.2k
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="google">
            <i className="fab fa-google-square" /> Share on Google+
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="google">
            <i className={"fab fa-google"} />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="google">
            <i className="fab fa-google" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="google" simple>
            <i className="fab fa-google" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="google" simple>
            <i className="fab fa-google-square" /> Share on Google+
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="linkedin">
            <i className="fab fa-linkedin" /> Connect with Linkedin
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="linkedin">
            <i className="fab fa-linkedin" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="linkedin">
            <i className="fab fa-linkedin" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="linkedin" simple>
            <i className="fab fa-linkedin" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="linkedin" simple>
            <i className="fab fa-linkedin" /> Connect with Linkedin
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="pinterest">
            <i className="fab fa-pinterest" /> Pint it · 212
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="pinterest">
            <i className="fab fa-pinterest" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="pinterest">
            <i className="fab fa-pinterest" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="pinterest" simple>
            <i className="fab fa-pinterest" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="pinterest" simple>
            <i className="fab fa-pinterest" /> Pint it · 212
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="youtube">
            <i className="fab fa-youtube" /> View on Youtube
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="youtube">
            <i className="fab fa-youtube-square" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="youtube">
            <i className="fab fa-youtube-square" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="youtube" simple>
            <i className="fab fa-youtube-square" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="youtube" simple>
            <i className="fab fa-youtube" /> View on Youtube
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="tumblr">
            <i className="fab fa-tumblr-square" /> Repost
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="tumblr">
            <i className="fab fa-tumblr-square" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="tumblr">
            <i className="fab fa-tumblr-square" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="tumblr" simple>
            <i className="fab fa-tumblr-square" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="tumblr" simple>
            <i className="fab fa-tumblr-square" /> Repost
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="github">
            <i className="fab fa-github" /> Connect with Github
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="github">
            <i className="fab fa-github" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="github">
            <i className="fab fa-github" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="github" simple>
            <i className="fab fa-github" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="github" simple>
            <i className="fab fa-github" /> Connect with Github
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="behance">
            <i className="fab fa-behance-square" /> Follow us
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="behance">
            <i className="fab fa-behance" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="behance">
            <i className="fab fa-behance-square" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="behance" simple>
            <i className="fab fa-behance" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="behance" simple>
            <i className="fab fa-behance-square" /> Follow us
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="dribbble">
            <i className="fab fa-dribbble" /> Find us on Dribble
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="dribbble">
            <i className="fab fa-dribbble" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="dribbble">
            <i className="fab fa-dribbble" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="dribbble" simple>
            <i className="fab fa-dribbble" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="dribbble" simple>
            <i className="fab fa-dribbble" /> Find us on Dribble
          </Button>
        </GridItem>
      </GridContainer>
      <GridContainer>
        <GridItem xs={12} sm={4} md={4}>
          <Button color="reddit">
            <i className="fab fa-reddit" /> Repost · 232
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="reddit">
            <i className="fab fa-reddit" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon round color="reddit">
            <i className="fab fa-reddit" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={1} md={1}>
          <Button justIcon color="reddit" simple>
            <i className="fab fa-reddit" />
          </Button>
        </GridItem>
        <GridItem xs={12} sm={4} md={3}>
          <Button color="reddit" simple>
            <i className="fab fa-reddit" /> Repost · 232
          </Button>
        </GridItem>
      </GridContainer>
    </>
  );
}

export default Examples;

`<a>` tag with button styles

Adding the href prop (without specifying a tag prop) will default the button to a link.

Disabled state

import React from "react";

// @material-ui/core components

// @material-ui/icons

// core components
import Button from "components/CustomButtons/Button.js";

function Examples() {
  return (
    <>
      <Button color="primary" size="lg" disabled>Primary button</Button>
      <Button size="lg" disabled>Button</Button>
    </>
  );
}

export default Examples;

Primary link Link

import React from "react";

// @material-ui/core components

// @material-ui/icons

// core components
import Button from "components/CustomButtons/Button.js";

function Examples() {
  return (
    <>
      <Button color="primary" size="lg" disabled href="#pablo">Primary Link</Button>
      <Button size="lg" disabled href="#pablo">Link</Button>
    </>
  );
}

export default Examples;

Props

Props FREE

Button.propTypes = {
  color: PropTypes.oneOf([
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "rose",
    "white",
    "transparent",
  ]),
  size: PropTypes.oneOf(["sm", "lg"]),
  simple: PropTypes.bool,
  round: PropTypes.bool,
  disabled: PropTypes.bool,
  block: PropTypes.bool,
  link: PropTypes.bool,
  justIcon: PropTypes.bool,
  className: PropTypes.string,
  // use this to pass the classes props from Material-UI
  muiClasses: PropTypes.object,
  children: PropTypes.node,
};

Props PRO

Button.propTypes = {
  color: PropTypes.oneOf([
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "rose",
    "white",
    "twitter",
    "facebook",
    "google",
    "linkedin",
    "pinterest",
    "youtube",
    "tumblr",
    "github",
    "behance",
    "dribbble",
    "reddit",
    "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,
  className: PropTypes.string,
  muiClasses: PropTypes.object,
  children: PropTypes.node,
};

If you wish to change this component, you should also check the following props from the base Material-UI components:

Button API