ExperimentalatomData display

ExpandableBio

A bio cut to one line, with See more when it doesn't fit.

import { … } from "@brdgapp/ui/components/expandable-bio"

Usage

ExpandableBio shows a person's bio on one line, with See more when it doesn't fit. The toggle appears only when the text really overflows at the current width, measured on screen, never guessed from how long the text is. The usual mistake is showing See more on a bio that already fits.

When to use

A person's bio on a profile card or row, where space is tight.

When not to use

For long-form text people came to read. Show it in full.

Anatomy

Founder of Quillbase. Previously led legal operations at two Series B startups and spent six years as a commercial lawyer.

Text. --text-body, cut to one line with an ellipsis.
Toggle. A link Button at xs: See more / See less.

Examples

A bio that doesn't fit

Change the width: See more comes and goes.

Founder of Quillbase. Previously led legal operations at two Series B startups and spent six years as a commercial lawyer. Building tools that let small legal teams review contracts in minutes instead of days.

A bio that fits

No toggle.

Partner at Saltmarsh Partners.

States

State	What happens
Fits	No toggle.
Collapsed	One line and See more.
Expanded	Full text and See less.

Behavior

Re-measures when its width changes, so the toggle appears or disappears as the layout reflows.
Measures only while collapsed, so expanding never hides the See less button.

Do and don't

Let the component decide when to show See more.

Don't

Show it based on a character count.

Content

The bio is the person's own words: show it exactly as written, never shortened or edited by Bridge.

Accessibility

The toggle reports aria-expanded and points at the text with aria-controls.

Keys	Action
`EnterSpace`	Show more or less.

API reference