Text

Text provides overflow handling. It renders a div by default and inherits typography from its surroundings.

Usage

Give the text a constrained width, then set truncate to show an ellipsis when it overflows:

import { Text } from 'twenty-ui/primitives/typography';

export const ContactName = () => (
  <Text truncate style={{ maxWidth: 160 }}>
    Alexandra Montgomery
  </Text>
);

Limit the number of lines

Use lineClamp with a positive integer. Choose either truncate or lineClamp; their props are mutually exclusive.

import { Text } from 'twenty-ui/primitives/typography';

export const Summary = () => (
  <Text lineClamp={2} style={{ maxWidth: 240 }}>
    Follow up with the customer about their onboarding milestones and upcoming
    renewal.
  </Text>
);

Choose an element

Use render when the text needs another semantic element:

import { Text } from 'twenty-ui/primitives/typography';

export const Description = () => (
  <Text render={<p />}>Account description</Text>
);

Truncation affects the visual presentation; it does not shorten the text in the DOM. Provide a way to read the full content when the visible portion is insufficient.

Props

Native attributes, children, refs, class names, and styles target the rendered text element. TextProps is exported from twenty-ui/primitives/typography. Text content is rendered unchanged, including caller-provided links.

number

Positive integer limiting the number of visible lines. Cannot be combined with truncate.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Replaces the default div. Native props and the ref target the rendered text element.

boolean

Truncates one line with an ellipsis. Cannot be combined with lineClamp.

Overview

Apps

API

Self-Host

Contribute

UI Library

Usage

Limit the number of lines

Choose an element

Props

​Usage

​Limit the number of lines

​Choose an element

​Props

Usage

Limit the number of lines

Choose an element

Props