MKButton
The MKTypography component provides different options for creating different typography elements. It uses MUI Typography in base and you can use all of the props from MUI Typographyfor the MKTypography 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 MKTypography from "components/MKTypography";
Typography
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'inherit''primary''secondary''info''success''warning''error''light''dark''text''white' | dark | Change the MKTypography text color. |
| fontWeight | 'false''light''regular''medium''bold' | false | Change the MKTypography font weight. |
| textTransform | 'none''capitalize''uppercase''lowercase' | none | Specifies how to capitalize text inside the MKTypography. |
| verticalAlign | 'unset''baseline''sub''super''text-top''text-bottom''middle''top''bottom' | unset | Specifies how to align text vertically inside the MKTypography. |
| textGradient | bool | false | If true the MKTypography text will be a gradient. |
| opacity | number | 1 | Specifies the opacity of the text inside the MKTypography. |
| children* | node | Use to pass node or content inside the MKTypography, its the only required prop. | |
| MUI Props | You can pass all of the MUI Typography props for the MKTypography as well. |
Variants
// Material Kit 2 React Components
import MKTypography from "components/MKTypography";
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Subtitle 1
Subtitle 2
Body 1
Body 2
Caption OverlineInherit
Gradient Text
// Material Kit 2 React Components
import MKTypography from "components/MKTypography";