> ## Documentation Index
> Fetch the complete documentation index at: https://makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting.mintlify.site/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://mintlify.s3.us-west-1.amazonaws.com/makeswift-sasha-eng-8460-create-a-guide-for-troubleshooting/images/link-panel.png" />
</Frame>

## Params

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

## 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.

<CodeGroup>
  ```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(),
    },
  })
  ```

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

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

  export function Button({ link }) {
    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>