Truncated Text – Code

Implementation
TruncatedText Props

Common Examples

To use the TruncatedText, import it from @servicetitan/anvil2-ai-kit and pass content through the required text prop. It uses body Text styling and clamps to two lines by default.

import { TruncatedText } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return <TruncatedText text="Long body content…" />;
}

Line limit

Set truncateLines to the maximum visible lines when collapsed. Use 0 to disable truncation.

Expand and collapse

When content overflows, TruncatedText adds Show more and Show less controls. The full content remains in the DOM; clipping is visual only.

Body size

The size prop accepts the body type scale: "fine", "compact", "regular" (default), and "featured".

Highlighted

Set highlighted to apply the suggested-change treatment.

Internationalization

TruncatedText uses ai-kit.text.showMore and ai-kit.text.showLess for its controls. English is the default. Mount AiKitIntlProvider inside CartoTheme to switch locale or override either string.

import {
  AiKitIntlProvider,
  CartoTheme,
  TruncatedText,
} from "@servicetitan/anvil2-ai-kit";

function Root() {
  return (
    <CartoTheme>
      <AiKitIntlProvider
        locale="fr-FR"
        messages={{
          "ai-kit.text.showMore": "Afficher plus",
          "ai-kit.text.showLess": "Afficher moins",
        }}
      >
        <TruncatedText text="Long content…" />
      </AiKitIntlProvider>
    </CartoTheme>
  );
}

React Accessibility

Show more and Show less expose expansion state with aria-expanded and associate the control with its content through aria-controls.
Focus moves between Show more and Show less after expansion changes, preserving keyboard position.
The full text remains available in the DOM while collapsed.

<TruncatedText
  text="Long body content…"
  truncateLines={2}
  size="regular"
  highlighted={false}
/>

`TruncatedText` Props

The TruncatedText accepts the following props. It also accepts body Text props except variant, inline, and el, which are fixed by the component.

ReactNode

required

Body content. Must be valid HTML phrasing content.

string

Class merged onto the underlying Text element.

boolean

default:"false"

Applies the suggested-change highlight treatment.

"fine" | "compact" | "regular" | "featured"

default:"regular"

Body text size.

number

default:"2"

Maximum visible lines when collapsed. Set to 0 to disable truncation.

AI Kit

Agent Experience

Truncated Text – Code

Common Examples

Line limit

Expand and collapse

Body size

Highlighted

Internationalization

React Accessibility

`TruncatedText` Props

​Common Examples

​Line limit

​Expand and collapse

​Body size

​Highlighted

​Internationalization

​React Accessibility

​TruncatedText Props

Common Examples

Line limit

Expand and collapse

Body size

Highlighted

Internationalization

React Accessibility

`TruncatedText` Props