var Component=(()=>{var c=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var a in e)r(n,a,{get:e[a],enumerable:!0})},o=(n,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of T(e))!g.call(n,i)&&i!==a&&r(n,i,{get:()=>e[i],enumerable:!(s=d(e,i))||s.enumerable});return n};var u=(n,e,a)=>(a=n!=null?c(p(n)):{},o(e||!n||!n.__esModule?r(a,"default",{value:n,enumerable:!0}):a,n)),b=n=>o(r({},"__esModule",{value:!0}),n);var x=f((S,l)=>{l.exports=_jsx_runtime});var I={};m(I,{default:()=>z,frontmatter:()=>v});var t=u(x()),v={id:"text",category:"typography",title:"Text",package:"@chakra-ui/layout",description:"Text is the used to render text and paragraphs within an interface."};function h(n){let e=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",h3:"h3",strong:"strong"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-js",children:`import { Text } from '@chakra-ui/react' `})}),` `,(0,t.jsx)(e.h2,{id:"changing-the-font-size",children:"Changing the font size"}),` `,(0,t.jsxs)(e.p,{children:["To increase the font size of the text, you can pass the ",(0,t.jsx)(e.code,{children:"fontSize"})," prop."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",children:` (6xl) In love with React & Next (5xl) In love with React & Next (4xl) In love with React & Next (3xl) In love with React & Next (2xl) In love with React & Next (xl) In love with React & Next (lg) In love with React & Next (md) In love with React & Next (sm) In love with React & Next (xs) In love with React & Next `})}),` `,(0,t.jsx)(e.h3,{id:"truncate-text",children:"Truncate text"}),` `,(0,t.jsxs)(e.p,{children:[`If you'd like to truncate the text after a specific number of lines, pass the `,(0,t.jsx)(e.code,{children:"noOfLines"}),` prop. This will render an ellipsis when the text exceeds the width of the viewport or `,(0,t.jsx)(e.code,{children:"maxWidth"})," prop."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",live:"false",children:`// Basic version "The quick brown fox jumps over the lazy dog" is an English-language pangram\u2014a sentence that contains all of the letters of the English alphabet. Owing to its existence, Chakra was created. // Responsive version "The quick brown fox jumps over the lazy dog" is an English-language pangram\u2014a sentence that contains all of the letters of the English alphabet. Owing to its existence, Chakra was created. `})}),` `,(0,t.jsx)(e.h3,{id:"override-style",children:"Override style"}),` `,(0,t.jsxs)(e.p,{children:[`You can change the entire style of the text via props. For example, to change the font size, pass the `,(0,t.jsx)(e.code,{children:"fontSize"})," prop. No need to write ",(0,t.jsx)(e.code,{children:"css"})," or ",(0,t.jsx)(e.code,{children:"styled()"}),"."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",children:` I'm using a custom font-size value for this text `})}),` `,(0,t.jsx)(e.h3,{id:"override-the-element",children:"Override the element"}),` `,(0,t.jsxs)(e.p,{children:["To override the element that gets rendered, pass the ",(0,t.jsx)(e.code,{children:"as"})," prop. Use ",(0,t.jsx)(e.strong,{children:`Inspect Element`})," to see the element that gets rendered in html."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",children:`<> Bold
Italic
Underline
I18N
Citation
Deleted
Emphasis
Inserted
Ctrl + C
Highlighted
Strikethrough
Sample
sub
sup `})})]})}function w(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(h,n)})):h(n)}var z=w;return b(I);})(); ;return Component;

Text

Props#

Props#