# Show More

A toggle button that switches between "Show more" and "Show less" labels with a caret icon. Used to expand and collapse content sections.

```tsx demo
import { useState } from "react";

import { ShowMore } from "@tenstorrent/vesper/show-more";

export default function ShowMoreDemo() {
  const [expanded, setExpanded] = useState(false);

  return (
    <ShowMore
      style={{ width: "100%" }}
      expanded={expanded}
      onClick={() => setExpanded(!expanded)}
    />
  );
}
```

## Options

| Prop       | Type                                   | Description                                                                               | Default |
| ---------- | -------------------------------------- | ----------------------------------------------------------------------------------------- | ------- |
| `expanded` | `boolean`                              | Whether the content is currently expanded. Controls the button label and `aria-expanded`. | `false` |
| `disabled` | `boolean`                              | When `true`, renders the button in a disabled state and prevents interaction.             | `false` |
| `onClick`  | `MouseEventHandler<HTMLButtonElement>` | Callback fired when the show more/less button is clicked.                                 | —       |

## Examples

### Basic usage

`ShowMore` is fully controlled: pass the current `expanded` state to set the button's label and caret direction, and use `onClick` to toggle the content you're revealing:

```tsx demo
import { useState } from "react";

import { ShowMore } from "@tenstorrent/vesper/show-more";
import { Typography } from "@tenstorrent/vesper/typography";

export default function ShowMoreWithContent() {
  const [expanded, setExpanded] = useState(false);

  return (
    <div style={{ width: "100%" }}>
      {expanded && <Typography>Additional content revealed here.</Typography>}
      <ShowMore expanded={expanded} onClick={() => setExpanded(!expanded)} />
    </div>
  );
}
```

### Disabled

Passing `disabled` prevents interaction:

```tsx demo
import { ShowMore } from "@tenstorrent/vesper/show-more";

export default function DisabledShowMore() {
  return <ShowMore disabled />;
}
```