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.

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:

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:

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

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