ExpandableText

Renders children in a height-constrained container, revealing a "More"/"Less" toggle only when the content overflows collapsedHeight. Overflow is measured from the live DOM after layout, and height animates with motion.

This porcelain tile pairs a honed limestone visual with a through-body composition, giving it depth that survives edge chips and daily wear. It is rated for high-traffic commercial floors, resists staining and frost, and reads calm underfoot while subtle vein movement keeps large installations from looking flat.

Usage

import { ExpandableText } from "@desk/ui/components/expandable-text";

Best practices

Use this for a run of body copy that should clamp to a few lines; for a labelled show/hide region with a caller-controlled trigger use Collapsible instead.
Set collapsedHeight in rem to the number of lines you want visible — the "More" toggle appears only when content actually exceeds it, so short text stays untouched.
Overflow is measured after layout from the live DOM; if children change height dynamically, remount (via key) so the clamp re-measures.

Props

Prop	Type	Default	Description
children(required)	`import("react").ReactNode`		Content to render inside the expandable area.
className	`string`		Additional className for the outer container.
collapsedHeight	`number`	`2.625 (~2 lines of sm text)`	Collapsed height in rem units.