Docs
πŸ—οΈ ⏐ Components
Typography
Typography

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

PropDescriptionDefault
colorColor variation of the title.
string
default
variantFont variant for the title.
"default" | "mono"
default
disableMarginsWhether to disable the margins.
boolean
false
themeTheme for the Typography.
TypographyTheme
refReference to the HTML heading element.
LegacyRef<HTMLHeadingElement>

PrimaryHeading

PropDescriptionDefault
colorColor variation of the title.
string
default
variantFont variant for the heading.
"default" | "mono"
default
disableMarginsWhether to disable the margins.
boolean
false
themeTheme for the Typography.
TypographyTheme
refReference to the HTML heading element.
LegacyRef<HTMLHeadingElement>

SecondaryHeading

PropDescriptionDefault
colorColor variation of the heading.
string
default
variantFont variant for the heading.
"default" | "mono"
default
disableMarginsWhether to disable the margins.
boolean
false
themeTheme for the Typography.
TypographyTheme
refReference to the HTML heading element.
LegacyRef<HTMLHeadingElement>

Sub

PropDescriptionDefault
colorColor variation of the text.
string
default
variantFont variant for the text.
"default" | "mono"
default
disableMarginsWhether to disable the margins.
boolean
false
themeTheme for the Typography.
TypographyTheme
refReference to the HTML heading element.
LegacyRef<HTMLHeadingElement>

Text

PropDescriptionDefault
colorColor variation of the text.
string
default
fontStyle
"default" | "thin" | "bold" | "extraBold" | "italic"
default
variantFont variant for the text.
"default" | "mono"
default
themeTheme for the Typography.
TypographyTheme
refReference to the HTML heading element.
LegacyRef<HTMLSpanElement>