Propel

Anchor Button

A semantic navigation link with inline text-link styling and optional icons.

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

export default function BasicDemo() {
  return <AnchorButton href="#work-items" label="View work items" variant="primary" size="sm" />;
}

Installation

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

Usage

AnchorButton is for navigation and renders a semantic <a> by default. A destination is required: pass href for native navigation, or use render to project its props onto a router or framework link. It also accepts native anchor attributes such as target, rel, download, and aria-*; the API table focuses on the component-owned props. Use TextButton for lightweight text-only actions, or Button for actions with button chrome.

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

export default function BasicDemo() {
  return <AnchorButton href="#work-items" label="View work items" variant="primary" size="sm" />;
}

Examples

Variants

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

View membersWorkspace settings
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 href="#members" label="View members" variant="primary" size="sm" />
      <AnchorButton href="#settings" label="Workspace settings" 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.

View work itemsView work itemsView work itemsView work items
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 href="#work-items" label="View work items" variant="primary" size="xs" />
      <AnchorButton href="#work-items" label="View work items" variant="primary" size="sm" />
      <AnchorButton href="#work-items" label="View work items" variant="primary" size="md" />
      <AnchorButton href="#work-items" label="View work items" variant="primary" size="lg" />
    </div>
  );
}

With icons

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

Browse conditionsView docs
Show code
import { AnchorButton } from "@makeplane/propel/components/anchor-button";
import { Icon } from "@makeplane/propel/components/icon";
import { ArrowNarrowRightOutline, NewTabArrowOutline } from "@makeplane/propel/icons";

export default function WithIconsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <AnchorButton
        href="#conditions"
        label="Browse conditions"
        variant="primary"
        size="sm"
        icon={<Icon icon={ArrowNarrowRightOutline} />}
      />
      <AnchorButton
        href="https://docs.plane.so"
        label="View docs"
        variant="secondary"
        size="sm"
        icon={<Icon icon={NewTabArrowOutline} />}
        iconPosition="end"
      />
    </div>
  );
}

Pass href directly for native navigation. The anchor keeps native link behavior, including Enter activation and open-in-new-tab support; unlike a button, Space does not activate it. For client-side routing, pass the router link through render instead. When disabled, AnchorButton removes its destination and custom renderer and suppresses interaction.

For an external destination, set external to supply a trailing arrow, target="_blank", and rel="noreferrer noopener". Explicit icon, target, or rel values override those defaults. The component does not infer this from href, so same-origin URLs, allowlisted hosts, and router destinations stay under the caller’s control.

The underline is always visible so the control retains conventional link affordance.

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

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

API Reference

AnchorButton

A semantic link with inline text-link chrome. It renders a native <a> by default and lays out an optional icon beside the label (iconPosition). Pass href, or use render to project the anchor props onto a router or framework link. For lightweight text-only actions, use TextButton; for actions with button chrome, use Button; for a navigation link with button chrome, use Button's render path.

PropTypeDefaultDescription
variant(required)"primary" | "secondary"—
size(required)"xs" | "sm" | "md" | "lg"—
label(required)string—Visible action/link label.
hrefstring—
renderAnchorButtonRender—
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.
externalbooleanfalseOpens the destination in a new tab with a trailing arrow and rel="noreferrer noopener". Explicit target, rel, or icon values override these defaults. This flag does not infer whether an href is external.
disabledboolean—Removes the destination and custom renderer, blocks interaction, and leaves an inert anchor. Toggling this with a custom renderer changes the element type and remounts it.