React Typography - Soft UI

The SoftTypography 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 SoftTypography 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

// Soft UI Dashboard React components import SoftTypography from "components/SoftTypography";

Typography

Props Information

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

Variants

// Soft UI Dashboard React components import SoftTypography from "components/SoftTypography";

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Subtitle 1
Subtitle 2

Body 1

Body 2

Button Caption Overline

Inherit

Gradient Text

// Soft UI Dashboard React components import SoftTypography from "components/SoftTypography";

Gradient Text