Link

Add a Link property to your component so designers can create clickable links with full control over URL, target behavior, and preload settings.

Syntax

1
// Prop definition
2
props.Link({
3
    name: string,
4
    group?: string,
5
    tooltip?: string,
6
})
7
8
// Prop value
9
PropType.Link

Prop definition

Define the Link prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

1
props.Link({
2
    name: string,
3
    group?: string,
4
    tooltip?: string,
5
})

Properties

• name: The name for the property.
• group: The group for this property (optional).
• tooltip: The tooltip for this property (optional).

Examples

Direct mapping

Define a Link property in your Webflow component, that directly maps to a link property in your React component. If your React component expects a href and target property, see the prop mapping example below.

1
import { declareComponent } from '@webflow/react';    
2
import { props } from '@webflow/data-types';
3
import { MyComponent } from "./MyComponent";
4
import "../styles/globals.css";
5
6
export default declareComponent(MyComponent, {
7
name: "MyComponent",
8
description: "A component with a Link property",
9
props: {
10
    link: props.Link({
11
        name: "Button Link",
12
        group: "Navigation"
13
    })
14
}
15
});

Prop mapping

This example shows how to define a Link property in your Webflow component, with a wrapper to map the link property to an href and target property in your React component.

1
import { props, PropType, PropValues } from "@webflow/data-types";
2
import { declareComponent } from "@webflow/react";
3
import React from "react";
4
import { MyComponent, MyComponentProps } from "../direct-mapping/MyComponent";
5
6
// Remove href and target from the props to prevent conflicts
7
type WebflowMyComponentProps = {
8
link: PropValues[PropType.Link];
9
} & Omit<MyComponentProps, "href" | "target">; // Remove buttonText from the props
10
11
// Wrapper that destructures the object returned from `props.Link` and passes the href and target to the button component as expected.
12
const WebflowMyComponent = ({
13
    link: { href, target },
14
    ...props
15
}: WebflowMyComponentProps) => {
16
    return (
17
        <MyComponent href={href} target={target} {...props} />
18
    );
19
};
20
21
// Component declaration for Webflow
22
export default declareComponent(WebflowMyComponent, {
23
name: "MyComponent",
24
props: {
25
    text: props.Text({ 
26
    name: "Text", 
27
    defaultValue: "Lorem ipsum" 
28
    }),
29
    link: props.Link({ name: "Link" }),
30
},
31
});

Prop value

The Link prop value provides an object to your React component with the following properties:

1
{
2
    href: string,
3
    target?: "_self" | "_blank" | string,
4
    preload?: "prerender" | "prefetch" | "none" | string,
5
}

Properties

• href: The URL destination.
• target: How the link opens (optional).
• preload: Preload behavior (optional).

Webflow properties panel

Example

1
import React from "react";
2
import "../styles/globals.css";
3
4
export interface MyComponentProps {
5
    text?: string;
6
    link?: {
7
        href: string;
8
        target?: "_self" | "_blank" | string;
9
        preload?: "prerender" | "prefetch" | "none" | string;
10
    };
11
}
12
13
export const MyComponent = ({ text, link }: MyComponentProps) => {
14
    if (!link) return null;
15
16
    return (
17
        <a 
18
        href={link.href}
19
        target={link.target}
20
        rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
21
        >
22
        {text}
23
        </a>
24
    );
25
}

When to use

Use a Link prop when you want designers to:

• Set URLs for buttons or text links
• Control link behavior (same tab vs new tab)
• Create navigation components

Best practices

• Handle missing links gracefully
• Add proper rel attributes for security
• Consider accessibility for link text