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