Text

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

Import

import { Text } from '@sajari-ui/core';

import { Text } from '@sajari-ui/core';

Changing the font size

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

Editable Example

In love with React & Next

<Box space="space-y-2">
  <Text fontSize="text-6xl">In love with React & Next</Text>
  <Text fontSize="text-5xl">In love with React & Next</Text>
  <Text fontSize="text-4xl">In love with React & Next</Text>
  <Text fontSize="text-3xl">In love with React & Next</Text>
  <Text fontSize="text-2xl">In love with React & Next</Text>
  <Text fontSize="text-xl">In love with React & Next</Text>
  <Text fontSize="text-lg">In love with React & Next</Text>
  <Text fontSize="text-md">In love with React & Next</Text>
  <Text fontSize="text-sm">In love with React & Next</Text>
  <Text fontSize="text-xs">In love with React & Next</Text>
</Box>

<Box space="space-y-2">
  <Text fontSize="text-6xl">In love with React & Next</Text>
  <Text fontSize="text-5xl">In love with React & Next</Text>
  <Text fontSize="text-4xl">In love with React & Next</Text>
  <Text fontSize="text-3xl">In love with React & Next</Text>
  <Text fontSize="text-2xl">In love with React & Next</Text>
  <Text fontSize="text-xl">In love with React & Next</Text>
  <Text fontSize="text-lg">In love with React & Next</Text>
  <Text fontSize="text-md">In love with React & Next</Text>
  <Text fontSize="text-sm">In love with React & Next</Text>
  <Text fontSize="text-xs">In love with React & Next</Text>
</Box>

Truncate text

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

Editable Example

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

<Text truncate>
  Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts
  and visual mockups.
</Text>

<Text truncate>
  Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts
  and visual mockups.
</Text>

Multiline truncation is also supported. Simple pass a number between 2 and 5 rather than a boolean.

Editable Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel risus sit amet facilisis. Duis eleifend gravida lacus vel vestibulum. Aenean ex nunc, facilisis sit amet lorem sollicitudin, dictum lacinia metus. Vivamus lacus mauris, tempor id leo et, pretium dignissim massa. Aliquam erat volutpat. Vestibulum erat ligula, maximus a orci cursus, luctus rutrum justo. Aenean elementum mattis orci nec aliquet. Pellentesque malesuada aliquam lorem, a fermentum mi dictum sed. Integer ultricies dolor quis ex scelerisque, vitae pretium dolor consectetur. Integer fringilla justo sed venenatis luctus. Ut a sapien vitae lorem dignissim fringilla. Suspendisse sit amet leo quam.

<Text truncate={2}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel risus sit amet facilisis. Duis eleifend
  gravida lacus vel vestibulum. Aenean ex nunc, facilisis sit amet lorem sollicitudin, dictum lacinia metus. Vivamus
  lacus mauris, tempor id leo et, pretium dignissim massa. Aliquam erat volutpat. Vestibulum erat ligula, maximus a orci
  cursus, luctus rutrum justo. Aenean elementum mattis orci nec aliquet. Pellentesque malesuada aliquam lorem, a
  fermentum mi dictum sed. Integer ultricies dolor quis ex scelerisque, vitae pretium dolor consectetur. Integer
  fringilla justo sed venenatis luctus. Ut a sapien vitae lorem dignissim fringilla. Suspendisse sit amet leo quam.
</Text>

<Text truncate={2}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit vel risus sit amet facilisis. Duis eleifend
  gravida lacus vel vestibulum. Aenean ex nunc, facilisis sit amet lorem sollicitudin, dictum lacinia metus. Vivamus
  lacus mauris, tempor id leo et, pretium dignissim massa. Aliquam erat volutpat. Vestibulum erat ligula, maximus a orci
  cursus, luctus rutrum justo. Aenean elementum mattis orci nec aliquet. Pellentesque malesuada aliquam lorem, a
  fermentum mi dictum sed. Integer ultricies dolor quis ex scelerisque, vitae pretium dolor consectetur. Integer
  fringilla justo sed venenatis luctus. Ut a sapien vitae lorem dignissim fringilla. Suspendisse sit amet leo quam.
</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.

Editable Example

I'm using a custom font-size value for this text

<Text fontSize="text-lg" textColor="text-red-500">
  I'm using a custom font-size value for this text
</Text>

<Text fontSize="text-lg" textColor="text-red-500">
  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.

Editable Example

Italic
Underline
I18N
Citation
~~Deleted~~
Emphasis
Inserted
⌘ + C
Highlighted
~~Strikethrough~~
Sample
Code
_sub
^sup

<>
  <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">⌘ + C</Text>
  <br />
  <Text as="mark">Highlighted</Text>
  <br />
  <Text as="s">Strikethrough</Text>
  <br />
  <Text as="samp">Sample</Text>
  <br />
  <Text as="code">Code</Text>
  <br />
  <Text as="sub">sub</Text>
  <br />
  <Text as="sup">sup</Text>
</>

<>
  <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">⌘ + C</Text>
  <br />
  <Text as="mark">Highlighted</Text>
  <br />
  <Text as="s">Strikethrough</Text>
  <br />
  <Text as="samp">Sample</Text>
  <br />
  <Text as="code">Code</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.

Name	Type	Default	Description
`as`	`p`, `small`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `figcaption`, `pre`, `code`, `em`, `i`, `u`, `cite`, `del`, `ins`, `kbd`, `mark`, `s`, `samp`, `sub`, `sup`, `strong`	`p`	The element to render for the text.
`truncate`	`boolean`, `2`, `3`, `4`, `5`	`false`	Whether to truncate the text. Numeric values are used for line clamping.