SPFx PropertyPaneLink: Adding Helpful Links to the Property Pane

Introduction

As we continue exploring the native SharePoint Framework Property Pane controls, we now arrive at PropertyPaneLink.

Unlike controls such as TextField, Dropdown, or Slider, this control does not collect information from the user.

Instead, it provides quick access to external resources directly from the Property Pane.

Typical examples include:

• Product documentation
• User guides
• Support pages
• FAQ pages
• Privacy policies
• Company portals
• Microsoft Learn documentation

Although simple, it is an excellent way to improve the usability of a Web Part by providing immediate access to additional information.

What is PropertyPaneLink?

PropertyPaneLink displays a clickable hyperlink inside the Property Pane.

When the user clicks the link, a web page is opened.

Unlike previous controls, it does not:

• store configuration values;
• execute Web Part logic;
• send data to React;
• update this.properties.

It simply performs navigation.

What We Are Building

In this example, the Property Pane displays a link pointing to the SharePoint Framework documentation.

Open Microsoft Learn

When clicked, the browser opens:

https://learn.microsoft.com/sharepoint/dev/spfx/

Why Are the Interfaces Empty?

Like PropertyPaneLabel, this control does not communicate with the React component.

Therefore, both interfaces remain empty.

Web Part

export interface IPropertyPaneLinkWebPartProps {
}

React Component

export interface IPropertyPaneLinkWpProps {
}

There is no property to store because clicking a link does not represent configuration.

Creating the Link

The control is created inside getPropertyPaneConfiguration().

PropertyPaneLink('documentationLink', {
    text: 'Open Microsoft Learn',
    href: 'https://learn.microsoft.com/sharepoint/dev/spfx/',
    target: '_blank'
})

This is all that is required.

Understanding text

text: 'Open Microsoft Learn'

This is the text displayed to the user.

Users click this text to open the destination.

Understanding href

href: 'https://learn.microsoft.com/sharepoint/dev/spfx/'

This specifies the destination URL.

It can point to:

• Microsoft Learn
• Company documentation
• SharePoint pages
• External websites
• Internal portals

Understanding target

target: '_blank'

Determines where the page will open.

Using:

_blank

opens a new browser tab.

Using:

_self

opens the page in the current browser tab.

For documentation, opening a new tab is generally the best user experience because users do not lose their current SharePoint page.

What About the First Parameter?

The control begins with:

'documentationLink'

This is only the control identifier.

Unlike controls such as TextField or Toggle, this identifier is not connected to this.properties.

There is no:

this.properties.documentationLink

because the Link does not store information.

Complete Example

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
        pages: [
            {
                header: {
                    description: strings.PropertyPaneDescription
                },
                groups: [
                    {
                        groupName: strings.BasicGroupName,
                        groupFields: [
                            PropertyPaneLink('documentationLink', {
                                text: 'Open Microsoft Learn',
                                href: 'https://learn.microsoft.com/sharepoint/dev/spfx/',
                                target: '_blank'
                            })
                        ]
                    }
                ]
            }
        ]
    };
}

When the Property Pane opens, the link appears immediately.

Clicking it opens the configured website.

Property Flow

Unlike previous controls, there is no data flow.

The execution is simply:

User clicks
↓
PropertyPaneLink
↓
Browser opens URL

Notice that neither the Web Part nor the React component is involved.

Common Scenarios

PropertyPaneLink is commonly used for:

• Microsoft Learn documentation
• Product manuals
• SharePoint guidance
• Configuration instructions
• Support portals
• Knowledge bases
• Company intranet pages
• GitHub repositories

It is especially useful in enterprise solutions where administrators may need quick access to documentation.

PropertyPaneLink vs PropertyPaneButton

These two controls may appear similar because users click them.

However, they serve completely different purposes.

A good rule is:

Use PropertyPaneLink when the user needs to visit another page.

Use PropertyPaneButton when the user needs to execute an operation.

PropertyPaneLink vs PropertyPaneLabel

These two controls belong to the informational category.

Often they are used together.

Example:

Need more information?
Open Microsoft Learn

This creates a much friendlier Property Pane.

Best Practices

• Use descriptive link text.
• Prefer official documentation whenever possible.
• Open external websites using _blank.
• Avoid very long URLs as link text.
• Group links with Labels for better organization.

Why This Example Matters

As Web Parts become more complex, users often need additional guidance.

Instead of filling the Property Pane with long explanations, a simple link allows users to access complete documentation whenever needed.

This keeps the Property Pane clean while still providing all necessary information.

Classification of Native Property Pane Controls

At this point in our series, we have explored three categories of native Property Pane controls.

Configuration Controls

These controls store values.

• PropertyPaneTextField
• PropertyPaneCheckbox
• PropertyPaneToggle
• PropertyPaneDropdown
• PropertyPaneChoiceGroup
• PropertyPaneSlider

Command Controls

These controls execute actions.

• PropertyPaneButton

Informational Controls

These controls display information.

• PropertyPaneLabel
• PropertyPaneLink

Understanding these categories makes it much easier to design intuitive Property Panes.

Conclusion

PropertyPaneLink is one of the simplest native SharePoint Framework controls, yet it provides significant value by connecting users to documentation and support resources.

It does not collect data, execute logic, or interact with React.

Its sole purpose is navigation.

Combined with PropertyPaneLabel, it helps create organized, self-documenting Property Panes that are easier for users to understand.

References

SharePoint Framework Overview

Integrate with the Property Pane

PropertyPaneLink API

IPropertyPaneLinkProps API

Microsoft Learn – SharePoint Framework

React Documentation