SPFx PropertyPaneButton: Executing Actions from the Property Pane

Introduction

Until now, every Property Pane control we have explored shared one common characteristic: they stored data inside the Web Part.

Examples include:

TextField → string
Checkbox → boolean
Toggle → boolean
Slider → number
Dropdown → string

The PropertyPaneButton is different.

Instead of storing information, it executes an action.

This makes it the first command control we have explored in this series.

Typical uses include:

Reset settings
Validate configuration
Reload external data
Clear cache
Test a connection
Open a help page
Execute a custom routine

What We Are Building

Our Web Part contains a single button inside the Property Pane.

When the user clicks it, a method inside the Web Part is executed.

Unlike previous controls, nothing is stored in this.properties.

The Main Difference

Every previous control worked like this:

			
User changes a value
↓
Property Pane
↓
this.properties
↓
render()
↓
React Component

		

The PropertyPaneButton follows a completely different flow.

			
User clicks the button
↓
Property Pane
↓
onClick()
↓
Execute a method
↓
Finish

		

Notice that there is no property being updated.

Why Doesn’t the Button Have a Property?

One of the first questions beginners ask is:

Why don’t we create something like this?

button: string;

The answer is simple.

A button is not data.

A button is an action.

For this reason, our interfaces can remain empty.

			
export interface IPropertyPaneButtonWpWebPartProps {
}

The React component also does not require any properties.

			
export interface IPropertyPaneButtonWpProps {
}

Unlike every previous Property Pane control, there is nothing to transfer from the Web Part to React.

Creating the Action

Inside the Web Part class, create a private method.

			
private _onButtonClick(): void {
    alert('Property Pane Button clicked!');
}

This method will be executed every time the button is pressed.

Notice that this method belongs to the Web Part class.

It is not part of the React component.

Adding the Button

The button is created inside getPropertyPaneConfiguration().

			
PropertyPaneButton('button', {
    text: 'Execute Action',
    buttonType: PropertyPaneButtonType.Primary,
    onClick: this._onButtonClick.bind(this)
})

		

Although the first parameter is named:

'button'

it is not stored in this.properties.

It simply identifies the control inside the Property Pane.

Understanding buttonType

The button appearance is controlled through the buttonType property.

The two most common values are:

PropertyPaneButtonType.Normal

and

PropertyPaneButtonType.Primary

The Primary button receives the SharePoint accent styling and is generally used for the main action.

Understanding onClick

The most important property is:

onClick: this._onButtonClick.bind(this)

When the user presses the button, SPFx executes:

this._onButtonClick();

This is the first Property Pane control in our series that reacts to an event instead of modifying a property.

Why Do We Use bind(this)?

Many developers ask why we need:

.bind(this)

The reason is that _onButtonClick() belongs to the Web Part class.

Without binding the current instance, the method could lose its execution context.

Using:

this._onButtonClick.bind(this)

guarantees that the method executes with the correct Web Part instance.

This is a common JavaScript and TypeScript pattern when passing class methods as callbacks.

Complete Example

			
private _onButtonClick(): void {
    alert('Property Pane Button clicked!');
}

			
PropertyPaneButton('button', {
    text: 'Execute Action',
    buttonType: PropertyPaneButtonType.Primary,
    onClick: this._onButtonClick.bind(this)
})

		

When the button is clicked, the alert immediately appears.

Comparing PropertyPaneButton with Other Controls

Control	Stores Data	Executes Action
TextField	✅	❌
Checkbox	✅	❌
Toggle	✅	❌
Slider	✅	❌
Dropdown	✅	❌
ChoiceGroup	✅	❌
Button	❌	✅

This makes the PropertyPaneButton unique among the native Property Pane controls.

Common Scenarios

The PropertyPaneButton is frequently used for:

Reset Web Part settings
Refresh cached data
Validate configuration
Test API connectivity
Open external documentation
Clear temporary data
Generate sample content
Execute administrative actions

Whenever the user needs to perform an operation instead of entering information, the PropertyPaneButton is an excellent choice.

Why This Example Matters

This article introduces an important concept that differs from every previous example.

Until now, the Property Pane has been responsible for collecting data.

The Button changes that idea completely.

Instead of asking:

“What value should be stored?”

it asks:

“What action should be executed?”

Understanding this distinction is fundamental before working with more advanced Property Pane controls.

Best Practices

Use buttons only for explicit actions.
Prefer PropertyPaneButtonType.Primary only for the main action.
Keep button captions short and descriptive.
Avoid destructive operations without confirmation.
Do not use a button when a Property Pane field would be more appropriate.

Conclusion

The PropertyPaneButton is the first native Property Pane control that does not store configuration values.

Instead, it allows developers to execute code directly from the Property Pane.

Although simple, it opens the door to many useful scenarios, including validation, refresh operations, cache management, and administrative commands.

Understanding the difference between configuration controls and command controls is an important milestone when learning SharePoint Framework Property Panes.