Text

Display text using well-defined typographic styles.

Props

children

ReactNodeLabel to display

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

size

"10" | "12" | "13" | "14" | "16" | "20" | "24" | "32" | "40" | "48"Maps to `font-size` with matching kerning and weight

lineHeight

"12" | "14" | "16" | "20" | "24" | "28" | "32" | "40" | "48" | "56"Maps to `line-height`

weight

"400" | "500" | "600" | "700" | "800"Maps to `font-weight`

color

"gray11" | "gray12" | "red11"Limited to eligible typography colors

align

"left" | "center" | "right"Maps to `text-align`

transform

"capitalize" | "uppercase" | "lowercase"Maps to `text-transform`

truncate

number | booleanTruncate a single or multiple line(s). If you pass truncate, make sure to pass `title` so that the full value is shown on hover.

import * as React from "react";
import { Text } from "basics";

export default () => {
  return (
    <Text size="32">
      The quick brown fox jumped over the lazy dog.
    </Text>
  );
}

import * as React from "react";
import { Text } from "basics";

export default () => {
  return (
    <Text size="32">
      The quick brown fox jumped over the lazy dog.
    </Text>
  );
}

Semantic elements

By default, Text renders a p element.

Use the asChild prop to change the rendered element.

<Text asChild>
  <h3>The quick brown fox jumps.</h3>
</Text>

Truncate


<Text size="32" style={{ maxWidth: '20ch' }} truncate>
  The quick brown fox jumps over the lazy dog.
</Text><Text size="32" style={{ maxWidth: '20ch' }} truncate>
  The quick brown fox jumps over the lazy dog.
</Text>

Clamp


<Text style={{ whiteSpace: 'break-spaces' }} truncate={3}>
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps
  over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. over the
  lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. over the lazy dog.
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</Text><Text style={{ whiteSpace: 'break-spaces' }} truncate={3}>
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps
  over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. over the
  lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. over the lazy dog.
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</Text>