> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Link

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

<Frame type="glass" caption="">
  <img src="https://mintcdn.com/makeswift/AOijlpVp0npNQ8wB/images/link-panel.png?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=b47a443ae16edc4d33690b81a54b5d14" width="1024" height="640" data-path="images/link-panel.png" />
</Frame>

## Params

<ParamField query="label" type="string" default="On click">
  Text for the panel label in the Makeswift builder.
</ParamField>

<ParamField query="description" type="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).
</ParamField>

## Prop type

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

```ts theme={null}
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.

<CodeGroup>
  ```tsx Button.makeswift.ts theme={null}
  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(),
    },
  });
  ```

  ```tsx Button.tsx theme={null}
  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>
    );
  }
  ```
</CodeGroup>

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