Text

Usage

import { Text } from "@chakra-ui/react"

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

Examples

Sizes

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

Weights

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

Truncation

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

Line Clamp

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

Ref

Here's how to access the underlying element reference

const Demo = () => {
  const ref = useRef<HTMLParagraphElement | null>(null)
  return <Text ref={ref}>This is the text component</Text>
}