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.


// Material Dashboard 2 React Components import MDTypography from "components/MDTypography";


Props Information

color'inherit''primary''secondary''info''success''warning''error''light''dark''text''white'darkChange the MDTypography text color.
fontWeight'false''light''regular''medium''bold'falseChange the MDTypography font weight.
textTransform'none''capitalize''uppercase''lowercase'noneSpecifies how to capitalize text inside the MDTypography.
verticalAlign'unset''baseline''sub''super''text-top''text-bottom''middle''top''bottom'unsetSpecifies how to align text vertically inside the MDTypography.
textGradientboolfalseIf true the MDTypography text will be a gradient.
opacitynumber1Specifies the opacity of the text inside the MDTypography.
children*nodeUse to pass node or content inside the MDTypography, its the only required prop.
MUI PropsYou can pass all of the MUI Typography props for the MDTypography as well.


// Material Dashboard 2 React 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

Button Caption Overline


Gradient Text

// Material Dashboard 2 React Components import MDTypography from "components/MDTypography";

Gradient Text