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
{
10
    href: string,
11
    target?: "_self" | "_blank" | string,
12
    preload?: "prerender" | "prefetch" | "none" | string,
13
}

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

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 returned to the React component

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

Webflow properties panel

Examples

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

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