Text

Used to render text and paragraphs within an interface.

Sphinx of black quartz, judge my vow.

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

Weights

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

Sphinx of black quartz, judge my vow.

Truncation

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

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