Text

Text is the used to render text and paragraphs within an interface.

View source@chakra-ui/layout

Import

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

Changing the font size

To increase the font size of the text, you can pass the fontSize prop.

<Stack spacing={3}>
  <Text fontSize="6xl">(6xl) In love with React & Next</Text>
  <Text fontSize="5xl">(5xl) In love with React & Next</Text>
  <Text fontSize="4xl">(4xl) In love with React & Next</Text>
  <Text fontSize="3xl">(3xl) In love with React & Next</Text>
  <Text fontSize="2xl">(2xl) In love with React & Next</Text>
  <Text fontSize="xl">(xl) In love with React & Next</Text>
  <Text fontSize="lg">(lg) In love with React & Next</Text>
  <Text fontSize="md">(md) In love with React & Next</Text>
  <Text fontSize="sm">(sm) In love with React & Next</Text>
  <Text fontSize="xs">(xs) In love with React & Next</Text>
</Stack>

Truncate text

If you'd like to truncate the text after a specific number of lines, pass the noOfLines prop. This will render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.

// Basic version
<Text noOfLines={1}>
  "The quick brown fox jumps over the lazy dog" is an English-language pangram—a
  sentence that contains all of the letters of the English alphabet. Owing to
  its existence, Chakra was created.
</Text>

// Responsive version
<Text noOfLines={[1, 2, 3]}>
   "The quick brown fox jumps over the lazy dog" is an English-language pangram—a
  sentence that contains all of the letters of the English alphabet. Owing to
  its existence, Chakra was created.
</Text>

Override style

You can change the entire style of the text via props. For example, to change the font size, pass the fontSize prop. No need to write css or styled().

<Text fontSize="50px" color="tomato">
  I'm using a custom font-size value for this text
</Text>

Override the element

To override the element that gets rendered, pass the as prop. Use Inspect Element to see the element that gets rendered in html.

<>
  <Text as="b">Bold</Text>
  <br />
  <Text as="i">Italic</Text>
  <br />
  <Text as="u">Underline</Text>
  <br />
  <Text as="abbr">I18N</Text>
  <br />
  <Text as="cite">Citation</Text>
  <br />
  <Text as="del">Deleted</Text>
  <br />
  <Text as="em">Emphasis</Text>
  <br />
  <Text as="ins">Inserted</Text>
  <br />
  <Text as="kbd">Ctrl + C</Text>
  <br />
  <Text as="mark">Highlighted</Text>
  <br />
  <Text as="s">Strikethrough</Text>
  <br />
  <Text as="samp">Sample</Text>
  <br />
  <Text as="sub">sub</Text>
  <br />
  <Text as="sup">sup</Text>
</>

Props

Text composes the Box component, so you can pass all Box style props.

align

Description

The CSS `text-align` property

Type

SystemProps["textAlign"]

casing

Description

The CSS `text-transform` property

Type

SystemProps["textTransform"]

colorScheme

Description

Color Schemes for Text are not implemented in the default theme. You can extend the theme to implement them.

Type

string

decoration

Description

The CSS `text-decoration` property

Type

SystemProps["textDecoration"]

size

Description

Sizes for Text are not implemented in the default theme. You can extend the theme to implement them.

Type

string

variant

Description

Variants for Text are not implemented in the default theme. You can extend the theme to implement them.

Type

string