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
2props.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.

1props.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:

PropType.Link
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

Link property in the Webflow panel

Examples

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.

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

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