Park UI Logo
GitHub
Typography
Text

Text

To display text in a variety of sizes and weights.

Usage

Sphinx of black quartz, judge my vow.

<Text>Sphinx of black quartz, judge my vow.</Text>

Examples

As another element

The Text component renders as an p element by default. Use the as property to specify a different HTML tag.

This is a p element.

This is a div element.
This is a span element.
<>
  <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.

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

<>
  <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.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

<>
  <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>
</>

Installation

npx @park-ui/cli components add text