MDButton
The MDButton component provides different styles for creating a button. It uses MUI Button in base and you can use all of the props from MUI Buttonfor the MDButton component.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// NextJS Material Dashboard 2 components
import MDButton from "/components/MDButton";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'text''contained''outlined''gradient' | contained | Change the MDButton background color type. |
| size | 'small''medium''large' | medium | Change the MDButton size. |
| color | 'primary''secondary''dark''success''warning''error''light''dark''white' | white | Change the MDButton background color. |
| circular | bool | false | If true the MDButton get a rounded or circular shape. |
| iconOnly | bool | false | If true the MDButton will have same width andheight values, its useful when using only icon inside the MDButton component. |
| children* | node | Use to pass node or content inside the MDButton, its the only required prop. | |
| MUI Props | You can pass all of the MUI Button props for the MDButton as well. |
Variants
// NextJS Material Dashboard 2 components
import MDButton from "/components/MDButton";
Sizes
// NextJS Material Dashboard 2 components
import MDButton from "/components/MDButton";
With Icon
// NextJS Material Dashboard 2 components
import MDButton from "/components/MDButton";
// @mui material components
import Icon from "@mui/material/Icon";
Block
// NextJS Material Dashboard 2 components
import MDButton from "/components/MDButton";