Propel

Anchor Button

An action that reads as an inline text link, with the same conventions as Button.

Show code
import { AnchorButton } from "@makeplane/propel/components/anchor-button";

export default function BasicDemo() {
  return <AnchorButton label="Show more" variant="primary" size="sm" />;
}

Installation

import { AnchorButton } from "@makeplane/propel/components/anchor-button";

Usage

import { AnchorButton } from "@makeplane/propel/components/anchor-button";

export default function BasicDemo() {
  return <AnchorButton label="Show more" variant="primary" size="sm" />;
}

Examples

Variants

primary is the blue link; secondary the muted gray inline link.

Show code
import { AnchorButton } from "@makeplane/propel/components/anchor-button";

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <AnchorButton label="Invite members" variant="primary" size="sm" />
      <AnchorButton label="Skip for now" variant="secondary" size="sm" />
    </div>
  );
}

Sizes

size matches Button’s ladder — xs 20 / sm 24 / md 28 / lg 32 px — so a text link sitting beside a button lines up at the same rung. It sets the label’s text size and the glyph beside it; there is no default.

Show code
import { AnchorButton } from "@makeplane/propel/components/anchor-button";

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

With icons

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

Show code
import { AnchorButton } from "@makeplane/propel/components/anchor-button";
import { Icon } from "@makeplane/propel/components/icon";
import { ArrowUpRight, Plus } from "lucide-react";

export default function WithIconsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <AnchorButton label="Add condition" variant="primary" size="sm" icon={<Icon icon={Plus} />} />
      <AnchorButton
        label="View docs"
        variant="secondary"
        size="sm"
        icon={<Icon icon={ArrowUpRight} />}
        iconPosition="end"
      />
    </div>
  );
}

Loading

The loading spinner takes the icon slot, dims the label, and makes the control non-interactive.

Show code
import { AnchorButton } from "@makeplane/propel/components/anchor-button";

export default function LoadingDemo() {
  return <AnchorButton label="Saving project…" variant="primary" size="sm" loading />;
}

By default the control is a <button> that reads as a link; for real navigation pass render={<a href=… />} with nativeButton={false} — the <a> keeps native navigation while Base UI keeps role, focus, and activation semantics right.

Open reportsView docs
Show code
import { AnchorButton } from "@makeplane/propel/components/anchor-button";
import { Icon } from "@makeplane/propel/components/icon";
import { ArrowUpRight } from "lucide-react";

export default function AsLinkDemo() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <AnchorButton
        label="Open reports"
        variant="primary"
        size="sm"
        nativeButton={false}
        render={<a href="#reports" />}
      />
      <AnchorButton
        label="View docs"
        variant="secondary"
        size="sm"
        nativeButton={false}
        render={<a href="https://docs.plane.so" />}
        icon={<Icon icon={ArrowUpRight} />}
        iconPosition="end"
      />
    </div>
  );
}

API Reference

AnchorButton

The ready-made interactive element that _looks like_ an inline text link — same conventions as `Button`: it grafts Base UI's `Button` behavior onto the styled `AnchorButton` element and lays out an optional `icon` beside the label (`iconPosition`) plus a `loading` spinner in the same slot. By default it is a `<button>` (an action that reads as a link — a "Show more" toggle, an inline "Edit"); for real navigation pass `render={<a href=… />}` + `nativeButton={false}`. For a link wearing the BUTTON chrome, use `Button` with the same `render` mechanics.

PropTypeDefaultDescription
variant(required)"primary" | "secondary"—
size(required)"xs" | "sm" | "md" | "lg"—
label(required)string—Visible action/link label.
disabledboolean—Hard, non-focusable native disabled state (`loading` stays focusable instead).
type"button" | "submit" | "reset"buttonThe button's form behavior.
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
nativeButtonboolean—Set `false` when `render` swaps the underlying tag away from `<button>` (e.g. `render={<a href=… />}` for a real navigation link): Base UI then keeps role, tab focus, and activation semantics right on the rendered tag.
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. The `loading` spinner takes the same slot.
loadingbooleanfalseShows a spinner in the icon slot, sets `aria-busy`, and makes the control non-interactive.