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