Text

Overview

Text provides typography and overflow handling. It renders a div by default. Omit size, weight and color to keep inheriting 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>
);

Choose typography

size uses the existing theme scale. It changes font size, with no height, font-family or line-height default:

Size	Theme value
`xxs`	`0.625rem`
`xs`	`0.85rem`
`sm`	`0.92rem`
`md`	`1rem`
`lg`	`1.23rem`
`xl`	`1.54rem`
`xxl`	`1.85rem`

weight accepts regular (400), medium (500) or semibold (600). color accepts primary, secondary, tertiary or light. Each omitted prop inherits independently. The visual size does not change the semantic element. For captions, compose the small size, semibold weight and light color:

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

export const Caption = () => (
  <Text size="xs" weight="semibold" color="light">
    Workspace
  </Text>
);

Use native style for runtime colors and parent-layout constraints. Caller classes and render composition target the same text element. Text adds no typography defaults when these props are omitted.

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.

"light" | "primary" | "secondary" | "tertiary"

Semantic text color. Omitted values inherit; native style supports runtime colors.

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.

"lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxs"

Font size from the theme scale. Omitted values inherit; this does not set height.

boolean

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

"medium" | "regular" | "semibold"

Theme font weight. Omitted values inherit.

Migration

color now selects a semantic theme color. Move arbitrary CSS color values from a native color attribute to style={{ color: customColor }}. Existing styles, classes and render composition continue to target the text element.

Developers

Apps

API

Self-Host

Contribute

UI Library

Overview

Usage

Choose typography

Limit the number of lines

Choose an element

Props

Migration

​Overview

​Usage

​Choose typography

​Limit the number of lines

​Choose an element

​Props

​Migration

Overview

Usage

Choose typography

Limit the number of lines

Choose an element

Props

Migration