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