> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Link

> Adds a Link panel in the Makeswift builder to visually edit a `LinkValue` prop.

Adds a Link panel in the Makeswift builder to visually edit a `LinkValue` prop.

![](/_fern-img/babbf857ece724f7edb847761e8d6b90adcd70f4bb64b8e5c700b152c79390c0.webp)

## Params

**`label`** `string` — default: On click

Text for the panel label in the Makeswift builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

## Prop type

The Link control passes an object of type `LinkValue` to your component.

```ts
type LinkValue = {
  href: string;
  target?: "_blank" | "_self";
};
```

If no value is set in the builder, your component receives `{ href: '#' }`.

## Example

The following example adds an Link control to the `link` prop of a Button component.

**`Button.makeswift.ts`**

```tsx Button.makeswift.ts
import { Link } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Button } from "./Button";

runtime.registerComponent(Button, {
  type: "button",
  label: "Button",
  props: {
    link: Link(),
  },
});
```

**`Button.tsx`**

```tsx Button.tsx
import Link from "next/link";

interface Props {
  link: {
    href: string;
    target?: "_blank" | "_self";
  };
}

export function Button({ link }: Props) {
  return (
    <Link
      className="px-4 py-3 rounded bg-black text-white"
      href={link.href}
      target={link.target}
    >
      Click me
    </Link>
  );
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).