Typography
Component for styling text and headings. It contains a set of components for different heading sizes and text styles.
PageTitle- The page title component is used for the main title of a page.PrimaryHeading- The primary heading component is used for the main heading of a section.SecondaryHeading- The secondary heading component is used for the secondary heading of a section.Sub- The sub component is used for a sub heading of a section.Text- The text component is used for normal text.
Examples
PageTitle
PrimaryHeading
SecondaryHeading
Text
Sub
Theme
This component uses the following default theme:
- root{}(9 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
PageTitle
| Prop | Description | Default |
|---|---|---|
color | Color variation of the title.string | default |
variant | Font variant for the title."default" | "mono" | default |
disableMargins | Whether to disable the margins.boolean | false |
theme | Theme for the Typography.TypographyTheme | |
ref | Reference to the HTML heading element.LegacyRef<HTMLHeadingElement> |
PrimaryHeading
| Prop | Description | Default |
|---|---|---|
color | Color variation of the title.string | default |
variant | Font variant for the heading."default" | "mono" | default |
disableMargins | Whether to disable the margins.boolean | false |
theme | Theme for the Typography.TypographyTheme | |
ref | Reference to the HTML heading element.LegacyRef<HTMLHeadingElement> |
SecondaryHeading
| Prop | Description | Default |
|---|---|---|
color | Color variation of the heading.string | default |
variant | Font variant for the heading."default" | "mono" | default |
disableMargins | Whether to disable the margins.boolean | false |
theme | Theme for the Typography.TypographyTheme | |
ref | Reference to the HTML heading element.LegacyRef<HTMLHeadingElement> |
Sub
| Prop | Description | Default |
|---|---|---|
color | Color variation of the text.string | default |
variant | Font variant for the text."default" | "mono" | default |
disableMargins | Whether to disable the margins.boolean | false |
theme | Theme for the Typography.TypographyTheme | |
ref | Reference to the HTML heading element.LegacyRef<HTMLHeadingElement> |
Text
| Prop | Description | Default |
|---|---|---|
color | Color variation of the text.string | default |
fontStyle | "default" | "thin" | "bold" | "extraBold" | "italic" | default |
variant | Font variant for the text."default" | "mono" | default |
theme | Theme for the Typography.TypographyTheme | |
ref | Reference to the HTML heading element.LegacyRef<HTMLSpanElement> |