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

// Prop definition
props.Link({
    name: string,
    group?: string,
    tooltip?: string,
})
// Prop value
{
    href: string,
    target?: "_self" | "_blank" | string,
    preload?: "prerender" | "prefetch" | "none" | string,
}

Prop definition

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

props.Link({
    name: string,
    group?: string,
    tooltip?: string,
})

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:

{
    href: string,
    target?: "_self" | "_blank" | string,
    preload?: "prerender" | "prefetch" | "none" | string,
}

Properties returned to the React component

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

Webflow properties panel

Examples

import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { Button } from "./Button";
export default declareComponent(Button, {
name: "Button",
description: "A Button component with a Link property",
props: {
    link: props.Link({
        name: "Button Link",
        group: "Navigation"
    }),
    text: props.Text({
        name: "Button Text",
        group: "Navigation"
    })
}
});

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