# Expand button (goodtabs UI)

A show more / show less control, with a wrapper that clamps text to a few lines.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/expand-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/expand-button`

## Usage

```tsx
import { Expandable, ExpandButton } from "@/components/ui/expand-button"

<Expandable lines={3}>{longText}</Expandable>

<ExpandButton open={open} controls="details" chevron onClick={() => setOpen(!open)} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| lines | `number` | `3` | How many lines Expandable shows while closed. |
| defaultOpen | `boolean` | `false` | Start Expandable open. |
| moreLabel | `string` | `"Show more"` | Label while closed. |
| lessLabel | `string` | `"Show less"` | Label while open. |
| chevron | `boolean` | `false` | Show a chevron that turns when open. |
| open | `boolean` |  | On ExpandButton alone: the state it reflects, as aria-expanded. |
| controls | `string` |  | On ExpandButton alone: id of the block it expands, as aria-controls. |

## When to use

- Long descriptions, bios and release notes in a card or list where space is tight
- Anywhere the first few lines are enough for most people and the rest is on demand
- As a plain toggle for your own collapsible block, through ExpandButton alone

## When not to use

- For hiding whole sections with headings: use an accordion or collapsible
- When the content is short; the button does not render if nothing is clamped
- For truncating a single line such as a title: use truncate

## Notes for agents

- Expandable owns its state and needs no props beyond children; it is a client component, the parent can stay server
- The button only appears when the text really overflows the clamp, measured with a ResizeObserver
- The clamp is CSS line-clamp, so children should be inline text or inline elements, not block layouts
- ExpandButton alone takes open and controls and an onClick, so its parent must be a client component ("use client")

Docs: https://ui.goodtabs.co/components/expand-button