Propel

Anchor Button

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

Basic

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

export default function BasicDemo() {
  return <AnchorButton label="Show more" prominence="primary" magnitude="md" />;
}

Prominences

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

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

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

Magnitudes

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

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <AnchorButton label="Show more" prominence="primary" magnitude="sm" />
      <AnchorButton label="Show more" prominence="primary" magnitude="md" />
      <AnchorButton label="Show more" prominence="primary" magnitude="lg" />
      <AnchorButton label="Show more" prominence="primary" magnitude="xl" />
    </div>
  );
}

With icons

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"
        prominence="primary"
        magnitude="md"
        startIcon={<Icon icon={Plus} />}
      />
      <AnchorButton
        label="View docs"
        prominence="secondary"
        magnitude="md"
        endIcon={<Icon icon={ArrowUpRight} />}
      />
    </div>
  );
}

Loading

The loading spinner replaces the leading icon, 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…" prominence="primary" magnitude="md" loading />;
}

Installation

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

Props

AnchorButton

PropTypeRequiredDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>NoAllows 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.
prominence"primary" | "secondary"Yes
magnitude"sm" | "md" | "lg" | "xl"Yes
nativeButtonbooleanNoSet `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.
startIconReactNodeNoElement rendered before the label (inline-start), e.g. `<Icon icon={Plus} />`.
endIconReactNodeNoElement rendered after the label (inline-end), e.g. `<Icon icon={ArrowUpRight} />`.
labelstringYesVisible action/link label.
loadingbooleanNoShows a spinner, sets `aria-busy`, and makes the control non-interactive.