Propel

Text Button

A native button for low-emphasis actions with lightweight text styling.

Show code
import { TextButton } from "@makeplane/propel/components/text-button";

export default function BasicDemo() {
  return <TextButton label="Try again" variant="primary" size="md" onClick={() => undefined} />;
}

Installation

import { TextButton } from "@makeplane/propel/components/text-button";

Usage

TextButton performs an action with lightweight text-only styling and no underline. It always renders native button semantics. Use AnchorButton instead when activation navigates to a destination, or Button when the action needs button chrome.

import { TextButton } from "@makeplane/propel/components/text-button";

export default function BasicDemo() {
  return <TextButton label="Try again" variant="primary" size="md" onClick={() => undefined} />;
}

Examples

Variants

primary is the blue action; secondary is the muted gray action.

Show code
import { TextButton } from "@makeplane/propel/components/text-button";

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <TextButton label="Select all" variant="primary" size="md" onClick={() => undefined} />
      <TextButton label="Clear filters" variant="secondary" size="md" onClick={() => undefined} />
    </div>
  );
}

Sizes

size supports the md and lg text and glyph steps (md 28 / lg 32 px). Because this is text-only chrome, a size changes the label and icon rather than introducing control height or padding.

Show code
import { TextButton } from "@makeplane/propel/components/text-button";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <TextButton label="Show more" variant="primary" size="md" onClick={() => undefined} />
      <TextButton label="Show more" variant="primary" size="lg" onClick={() => undefined} />
    </div>
  );
}

With an icon

Pass icon and pick its side with iconPosition (start by default).

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { TextButton } from "@makeplane/propel/components/text-button";
import { AddOutline, SettingsOutline } from "@makeplane/propel/icons";

export default function WithIconDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <TextButton
        label="Add condition"
        variant="primary"
        size="md"
        icon={<Icon icon={AddOutline} />}
        onClick={() => undefined}
      />
      <TextButton
        label="Configure"
        variant="secondary"
        size="md"
        icon={<Icon icon={SettingsOutline} />}
        iconPosition="end"
        onClick={() => undefined}
      />
    </div>
  );
}

Disabled

disabled uses the native, non-focusable disabled state and the disabled text and icon tokens.

Show code
import { Icon } from "@makeplane/propel/components/icon";
import { TextButton } from "@makeplane/propel/components/text-button";
import { AddOutline, SettingsOutline } from "@makeplane/propel/icons";

export default function DisabledDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <TextButton
        label="Add condition"
        variant="primary"
        size="md"
        icon={<Icon icon={AddOutline} />}
        disabled
      />
      <TextButton
        label="Configure"
        variant="secondary"
        size="md"
        icon={<Icon icon={SettingsOutline} />}
        iconPosition="end"
        disabled
      />
    </div>
  );
}

API Reference

TextButton

A native button for low-emphasis actions with lightweight text-only chrome. It lays out an optional icon beside the label. Unlike AnchorButton, TextButton never changes to link semantics and does not expose a render target.

PropTypeDefaultDescription
variant(required)"primary" | "secondary"—
size(required)"md" | "lg"—
label(required)string—Visible action label.
iconReactNode—Icon rendered beside the label (inline-start by default), e.g. <Icon icon={Plus} />.
iconPosition"start" | "end"startWhich side of the label the icon sits on.
disabledboolean—Uses the native, non-focusable disabled state.
type"button" | "submit" | "reset"buttonThe button's form behavior.