text.mdx

import SEO from '../components/SEO'

Text

Text is the used to render text and paragraphs within an interface. It renders a <p> tag by default.

Import

import { CText } from '@chakra-ui/vue'

Usage

<c-text>Vue is amazing, don't you think?</c-text>

Changing the font size

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

<c-stack :spacing="3">
  <c-text fontSize="6xl">In love with Vue and Nuxt</c-text>
  <c-text fontSize="5xl">In love with Vue and Nuxt</c-text>
  <c-text fontSize="4xl">In love with Vue and Nuxt</c-text>
  <c-text fontSize="3xl">In love with Vue and Nuxt</c-text>
  <c-text fontSize="2xl">In love with Vue and Nuxt</c-text>
  <c-text fontSize="xl">In love with Vue and Nuxt</c-text>
  <c-text fontSize="lg">In love with Vue and Nuxt</c-text>
  <c-text fontSize="md">In love with Vue and Nuxt</c-text>
  <c-text fontSize="sm">In love with Vue and Nuxt</c-text>
  <c-text fontSize="xs">In love with Vue and Nuxt</c-text>
</c-stack>

Truncate text

Pass the isTruncated prop to render an ellipsis when the text exceeds the width of the viewport or maxWidth set.

<c-text color="gray.500" is-truncated>
  “I was attracted to JavaScript because of the ability to just build something and share it instantly with the world. You put it on the web, and you get a URL, you can send it to anyone with a browser. That was the part that just attracted me to the web and to JavaScript.”
</c-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

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

Override the element

<c-stack :spacing="3">
 <c-text as="i">Italic</c-text>

  <c-text as="u">Underline</c-text>

  <c-text as="abbr">I18N</c-text>

  <c-text as="cite">Citation</c-text>

  <c-text as="del">Deleted</c-text>

  <c-text as="em">Emphasis</c-text>

  <c-text as="ins">Inserted</c-text>

  <c-text as="kbd">Ctrl + C</c-text>

  <c-text as="mark">Highlighted</c-text>

  <c-text as="s">Strikethrough</c-text>

  <c-text as="samp">Sample</c-text>

  <c-text as="sub">sub</c-text>

  <c-text as="sup">sup</c-text>
</c-stack>

Props

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

Slots

Name	Description
default	Used for displaying the textual content of the CText component