Truncated Description

Overview

Truncated Description shows a long block of description text clipped to a maximum length, with a “Show more” / “Show less” toggle to expand and collapse it. Use it to keep cards, list rows, and detail panels compact while still letting users read the full text on demand.

Length is measured against the description’s plain text, and the toggle only appears when the text exceeds maxLength. The description is rendered as HTML, only pass trusted content, since the markup is rendered directly.

Usage

Import the component:

import { TruncatedDescription } from "@eqtylab/equality";

Basic usage — description is required and defaults to truncating at 120 characters:

<TruncatedDescription description={longText} />

Set maxLength to change the threshold:

<TruncatedDescription description={longText} maxLength={300} />

Variants

Default truncation

Longer preview

Usage

<TruncatedDescription description={longText} />
<TruncatedDescription description={longText} maxLength={480} />

Short descriptions that fall under maxLength render in full with no toggle.

Props