Heading 1

Heading 2

Heading 3

Body

Body bold

Body secondary

Success

Error

MonospaceMonospace secondary

Body xs

Body sm

Body lg

Monospace lg

<div>
  <Text variant="h1">Heading 1</Text>
  <Text variant="h2">Heading 2</Text>
  <Text variant="h3">Heading 3</Text>
</div>
<div>
  <Text>Body</Text>
  <Text bold>Body bold</Text>
  <Text variant="secondary">Body secondary</Text>
  <Text variant="success">Success</Text>
  <Text variant="error">Error</Text>
  <Text variant="mono">Monospace</Text>
  <Text variant="mono-secondary">Monospace secondary</Text>
</div>
<div>
  <Text size="xs">Body xs</Text>
  <Text size="sm">Body sm</Text>
  <Text size="lg">Body lg</Text>
  <Text variant="mono" size="lg">
    Monospace lg
  </Text>
</div>

Installation

import { Text } from "~/components/text/text";

Usage

import { Text } from "~/components/text/text";

export default function Example() {
  return <Text>Your content here</Text>;
}

Restrictions

The bold and size props are intentionally restricted to the base, secondary, success, and error text variants.

<Text size="sm" bold>Body</Text>
<Text variant="secondary" bold>Body secondary</Text>
<Text variant="success" size="lg">Success</Text>
<Text variant="error">Error</Text>

Monospace variants (mono and mono-secondary) can only set size to lg and cannot use the bold prop:

<Text variant="mono">Monospace</Text>
<Text variant="mono" size="lg">Monospace</Text>
<Text variant="mono" bold>Monospace</Text> // Doesn't compile

Headings (i.e. h1, h2 and h3 variants) cannot use these props at all:

<Text variant="h1" bold>Heading 1</Text> // Doesn't compile