Text

Used to render text and paragraphs within an interface.

Sphinx of black quartz, judge my vow.

import { Text } from "chakra-ui-solid";

export default function TextBasic() {
  return <Text>Sphinx of black quartz, judge my vow.</Text>;
}

Usage

import { Text } from "chakra-ui-solid";

<Text>This is the text component</Text>

Examples

Sizes

Use the fontSize or textStyle prop to change the size of the text.

Chakra

import { Stack, Text } from "chakra-ui-solid";

export default function TextWithSizes() {
  return (
    <Stack>
      <Text textStyle="xs">Chakra</Text>
      <Text textStyle="sm">Chakra</Text>
      <Text textStyle="md">Chakra</Text>
      <Text textStyle="lg">Chakra</Text>
      <Text textStyle="xl">Chakra</Text>
      <Text textStyle="2xl">Chakra</Text>
      <Text textStyle="3xl">Chakra</Text>
      <Text textStyle="4xl">Chakra</Text>
      <Text textStyle="5xl">Chakra</Text>
      <Text textStyle="6xl">Chakra</Text>
      <Text textStyle="7xl">Chakra</Text>
    </Stack>
  );
}

Weights

Use the fontWeight prop to change the weight of the text.

Sphinx of black quartz, judge my vow.

import { Stack, Text } from "chakra-ui-solid";

export default function TextWithWeights() {
  return (
    <Stack>
      <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>
    </Stack>
  );
}

Truncation

Use the truncate prop to truncate the text after a single line.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

import { Flex, Text } from "chakra-ui-solid";

export default function TextWithTruncate() {
  return (
    <Flex maxW="300px">
      <Text truncate>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
    </Flex>
  );
}

Line Clamp

Use the lineClamp prop to truncate the text after a certain number of lines.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

import { Flex, Text } from "chakra-ui-solid";

export default function TextWithLineClamp() {
  return (
    <Flex maxW="300px">
      <Text lineClamp="2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </Text>
    </Flex>
  );
}

Ref

Here’s how to access the underlying element reference

function Demo() {
  let ref: HTMLParagraphElement | undefined;
  return <Text ref={ref}>This is the text component</Text>;
}

Props

TextProps

Adds no prop of its own. It takes everything it inherits — HTMLChakraProps<"p">, the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.