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