MKButton
The MKButton
component provides different styles for creating a button. It uses MUI Button
in base and you can use all of the props from MUI Button
for the MKButton
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
// Material Kit 2 React Components
import MKButton from "components/MKButton";
Props Information
Name | Type | Default | Description |
---|---|---|---|
variant | 'text''contained''outlined''gradient' | contained | Change the MKButton background color type. |
size | 'small''medium''large' | medium | Change the MKButton size. |
color | 'primary''secondary''info''success''warning''error''light''dark''white' | white | Change the MKButton background color. |
circular | bool | false | If true the MKButton get a rounded or circular shape. |
iconOnly | bool | false | If true the MKButton will have same width andheight values, its useful when using only icon inside the MKButton component. |
children* | node | Use to pass node or content inside the MKButton , its the only required prop. | |
MUI Props | You can pass all of the MUI Button props for the MKButton as well. |
Variants
// Material Kit 2 React Components
import MKButton from "components/MKButton";
Sizes
// Material Kit 2 React Components
import MKButton from "components/MKButton";
With Icon
// Material Kit 2 React Components
import MKButton from "components/MKButton";
// @mui material components
import Icon from "@mui/material/Icon";
Block
// Material Kit 2 React Components
import MKButton from "components/MKButton";