Text
To display text in a variety of sizes and weights.
Usage
<Text>Sphinx of black quartz, judge my vow.</Text>Examples
As another element
Utilize the as property to specify the HTML tag. This changes semantic markup without affecting visual style.
<>
<Text as="p">
This is a <Code>p</Code> element.
</Text>
<Text as="label">
This is a <Code>label</Code> element.
</Text>
<Text as="div">
This is a <Code>div</Code> element.
</Text>
<Text as="span">
This is a <Code>span</Code> element.
</Text>
</>Font Size
Use size or textStyle for text size. It makes line height and spacing smaller as text size grows and also ensures
text size is even for better layout.
<>
<Text size="xs">Ag</Text>
<Text size="sm">Ag</Text>
<Text size="md">Ag</Text>
<Text size="lg">Ag</Text>
<Text size="xl">Ag</Text>
<Text size="2xl">Ag</Text>
<Text size="3xl">Ag</Text>
<Text size="4xl">Ag</Text>
<Text size="5xl">Ag</Text>
<Text size="6xl">Ag</Text>
<Text size="7xl">Ag</Text>
</>Font Weight
Use the fontWeight prop to set the text weight.
<>
<Text fontWeight="light">Sphinx of black quartz, judge my vow.</Text>
<Text fontWeight="normal">Sphinx of black quartz, judge my vow.</Text>
<Text fontWeight="medium">Sphinx of black quartz, judge my vow.</Text>
<Text fontWeight="semibold">Sphinx of black quartz, judge my vow.</Text>
<Text fontWeight="bold">Sphinx of black quartz, judge my vow.</Text>
</>