Text

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

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

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

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>
);

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

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