Text Button

A minimal, text-only button without background or border. Supports multiple color variants, sizes, and optional leading or trailing icons. Ideal for inline actions and links.

import { TextButton } from "@tenstorrent/vesper/text-button";

export default function TextButtonDemo() {
  return <TextButton>Learn more</TextButton>;
}

Options

Prop	Type	Description	Default
`size`	`"sm" \| "md" \| "lg"`	The size of the text button. Affects font size.	`"md"`
`variant`	`"subtle" \| "contrast" \| "accent" \| "success" \| "warning" \| "danger" \| "info" \| "purple" \| "pink"`	The color variant of the text button.	`"accent"`
`disabled`	`boolean`	When `true`, renders in a disabled state and prevents interaction.	`false`
`iconLeft`	`ReactNode`	An optional icon element rendered to the left of the content.	—
`iconRight`	`ReactNode`	An optional icon element rendered to the right of the content.	—
`as`	`ElementType`	The root element type for polymorphic rendering.	`"button"`
`children`	`ReactNode`	The text content of the button.	—

All other props are forwarded to the underlying <button> element, or whichever root element is specified via the as prop.

Use a TextButton for low-emphasis actions that sit inline with surrounding content. When an action needs a filled or outlined background, reach for the Button component; when it is represented by a single icon, reach for the IconButton component.

Examples

Basic usage

Render a TextButton by giving it some children:

import { TextButton } from "@tenstorrent/vesper/text-button";

export default function BasicTextButton() {
  return <TextButton onClick={() => console.log("clicked")}>Edit</TextButton>;
}

Variants

A TextButton can be rendered in one of nine color variants. Pick the one that matches the meaning and/or urgency of the action. The default variant is "accent":

import { TextButton } from "@tenstorrent/vesper/text-button";

export default function TextButtonVariants() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: "var(--vesper-spacing-4)",
      }}
    >
      <TextButton variant="subtle">Subtle</TextButton>
      <TextButton variant="contrast">Contrast</TextButton>
      <TextButton variant="accent">Accent</TextButton>
      <TextButton variant="success">Success</TextButton>
      <TextButton variant="warning">Warning</TextButton>
      <TextButton variant="danger">Danger</TextButton>
      <TextButton variant="info">Info</TextButton>
      <TextButton variant="purple">Purple</TextButton>
      <TextButton variant="pink">Pink</TextButton>
    </div>
  );
}

Different sizes

A TextButton can be rendered in one of three sizes; "sm", "md", or "lg". The default size is "md":

import { TextButton } from "@tenstorrent/vesper/text-button";

export default function TextButtonSizes() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--vesper-spacing-4)",
      }}
    >
      <TextButton size="sm">Small</TextButton>
      <TextButton size="md">Medium</TextButton>
      <TextButton size="lg">Large</TextButton>
    </div>
  );
}

Rendering icons

A TextButton can render icons to the left or the right of its content via the iconLeft and iconRight props. Simply pass your icon as a ReactNode to either of these props:

import { ArrowRight, Download } from "@tenstorrent/vesper/icons";
import { TextButton } from "@tenstorrent/vesper/text-button";

export default function TextButtonsWithIcons() {
  return (
    <div
      style={{
        display: "flex",
        gap: "var(--vesper-spacing-4)",
      }}
    >
      <TextButton iconLeft={<Download />}>Download</TextButton>
      <TextButton iconRight={<ArrowRight />}>Continue</TextButton>
    </div>
  );
}

Disabling a text button

You can disable a TextButton by passing disabled={true} or just disabled as a prop. Disabling a button prevents interaction and changes the color scheme:

import { TextButton } from "@tenstorrent/vesper/text-button";

export default function DisabledTextButton() {
  return <TextButton disabled>A disabled text button</TextButton>;
}

Polymorphic usage

You can use the as prop to specify what underlying element to render. In this case, we are passing as="a" to render the TextButton as an anchor link, which is helpful when the action navigates somewhere instead of running a handler:

View documentation

import { ArrowRight } from "@tenstorrent/vesper/icons";
import { TextButton } from "@tenstorrent/vesper/text-button";

export default function TextButtonAsLink() {
  return (
    <TextButton as="a" href="#polymorphic-usage" iconRight={<ArrowRight />}>
      View documentation
    </TextButton>
  );
}