ttolbel UI

Component

Expandable text

A paragraph that truncates past a character or line limit and reveals the rest behind a 'Show more' toggle.

The primitive

We sent the payment on Tuesday but it took longer than expected to confirm. The recipient's bank flagged it for manual r…

expandable text.tsx
<NativeExpandableText text={text} maxLength={120} />

Example

A note attached to a transaction's detail view, truncated until the user chooses to read the rest.

Note

We sent the payment on Tuesday but it took longer than expected to confirm. The recipient's bank fla…

expandable-text-example.tsx
<NativeExpandableText text={transaction.note} maxLength={100} />

Capabilities

PropTypeDescription
textrequiredstring
maxLengthnumberMax characters before "Show more" appears
maxLinesnumberOr max lines (CSS line-clamp)
moreLabelstring
lessLabelstring
classNamestring