# Anchor Button

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

## Installation

```tsx
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](/components/text-button) for
lightweight text-only actions, or [Button](/components/button) for actions with button chrome.

```tsx
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.

```tsx
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.

```tsx
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).

```tsx
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>
  );
}
```

### Navigation

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.

```tsx
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.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` (required) | `"primary" \| "secondary"` | — |  |
| `size` (required) | `"xs" \| "sm" \| "md" \| "lg"` | — |  |
| `label` (required) | `string` | — | Visible action/link label. |
| `href` | `string` | — |  |
| `render` | `AnchorButtonRender` | — |  |
| `icon` | `ReactNode` | — | Icon rendered beside the label (inline-start by default), e.g. `<Icon icon={Plus} />`. |
| `iconPosition` | `"start" \| "end"` | `start` | Which side of the label the icon sits on. |
| `external` | `boolean` | `false` | Opens 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. |
| `disabled` | `boolean` | — | 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. |