Usage

Size

There are five font sizes available, medium is the default.

<Stack gap="small">
  <Text size="xsmall">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="small">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="medium">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="large">The quick brown fox jumps over the lazy dog.</Text>
  <Text size="xlarge">The quick brown fox jumps over the lazy dog.</Text>
</Stack>

Weight

There are five font weights available, regular is the default.

Edit in Playroom

<Stack gap="small">
  <Text weight="regular">The quick brown fox jumps over the lazy dog.</Text>
  <Text weight="medium">The quick brown fox jumps over the lazy dog.</Text>
  <Text weight="semibold">The quick brown fox jumps over the lazy dog.</Text>
  <Text weight="bold">The quick brown fox jumps over the lazy dog.</Text>
  <Text weight="heavy">The quick brown fox jumps over the lazy dog.</Text>
</Stack>

Color

You may apply alternative theme colors to the text, base is the default.

Edit in Playroom

<Columns>
  <Stack gap="small">
    <Text color="base">Base</Text>
    <Text color="muted">Muted</Text>
    <Text color="dim">Dim</Text>
  </Stack>
  <Stack gap="small">
    <Text color="active">Active</Text>
    <Text color="cautious">Cautious</Text>
    <Text color="critical">Critical</Text>
    <Text color="informative">Informative</Text>
    <Text color="positive">Positive</Text>
  </Stack>
</Columns>

Leading

Tighten or loosen the leading of your content. This translates to line-height in CSS.

Edit in Playroom

const [index, setIndex] = useState(2);
const leading = ['tighter', 'tight', 'base', 'loose', 'looser'];
return (
  <Stack gap="large">
    <Flex gap="small" algin="center">
      <input
        step="1"
        min="0"
        max={leading.length - 1}
        type="range"
        onChange={(e) => {
          setIndex(Number.parseInt(e.target.value));
        }}
        value={index}
      />
      <Text>gap: "{leading[index]}"</Text>
    </Flex>
    <Text leading={leading[index]}>
      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.
    </Text>
  </Stack>
);

Inline

Render the Text as an "inline" element.

Edit in Playroom

<Text>The quick brown fox <Text color="accent" weight="medium" inline>jumps over</Text> the lazy dog.</Text>

Overflow strategy

Use the overflowStrategy prop to manage how Text behaves with regard to overflow.

Edit in Playroom

<Stack gap="medium">
  <Box maxWidth={240}>
    <Text>
      <Strong>default:</Strong> The quick brown fox jumps over the lazy dog.
    </Text>
  </Box>
  <Box maxWidth={240}>
    <Text overflowStrategy="truncate">
      <Strong>truncate:</Strong> The quick brown fox jumps over the lazy dog.
    </Text>
  </Box>
  <Box maxWidth={240}>
    <Text overflowStrategy="nowrap">
      <Strong>nowrap:</Strong> The quick brown fox jumps over the lazy dog.
    </Text>
  </Box>
  <Box maxWidth={240}>
    <Text overflowStrategy="breakword">
      <Strong>breakword:</Strong> The quick_brown_fox_jumps_over_the_lazy_dog.
    </Text>
  </Box>
</Stack>

NextLink

For client side routing with Next, use as={NextLink}.

import { NextLink } from '@balance-web/next-link';
import { TextLink } from '@balance-web/text';
<TextLink as={NextLink} href="/">
  A link
</TextLink>;