Overview
ButtonComponent creates interactive buttons with support for icons, tooltips, and various visual styles. It extends BaseComponent and is commonly used in settings, modals, and custom views.
Constructor
The parent HTML element where the button will be created
const button = new ButtonComponent(containerEl);
Properties
Direct access to the underlying HTML button element
Whether the button is currently disabled
Methods
setButtonText
Sets the text label displayed on the button.
The button text to display
button.setButtonText("Save Settings");
this (for method chaining)
setIcon
Sets an icon to display on the button.
button.setIcon("checkmark");
this (for method chaining)
Adds a hover tooltip to the button.
The tooltip text to display
Optional configuration for tooltip placement, delay, and styling
button.setTooltip("Click to save", {
placement: "top",
delay: 500
});
this (for method chaining)
onClick
Registers a callback function to execute when the button is clicked.
callback
(evt: MouseEvent) => unknown | Promise<unknown>
required
Function to call on click. Can be synchronous or asynchronous.
button.onClick(async (evt) => {
console.log("Button clicked!");
await this.plugin.saveSettings();
});
this (for method chaining)
setCta
Sets the button as a Call-to-Action (CTA) with prominent styling.
Returns: this (for method chaining)
removeCta
Removes the CTA styling from the button.
Returns: this (for method chaining)
setWarning
Styles the button as a warning/destructive action.
Returns: this (for method chaining)
setDisabled
Enables or disables the button.
Whether the button should be disabled
button.setDisabled(true);
this (for method chaining)
setClass
Adds a CSS class to the button.
The CSS class name to add
button.setClass("custom-button-style");
this (for method chaining)
then
Facilitates method chaining with a callback.
cb
(component: this) => any
required
Callback function that receives the component instance
button.then((btn) => {
btn.setButtonText("Click me");
});
this (for method chaining)
Usage Examples
new Setting(containerEl)
.setName("Actions")
.setDesc("Perform common actions")
.addButton((button) => {
button
.setButtonText("Reset")
.onClick(async () => {
await this.plugin.resetSettings();
new Notice("Settings reset!");
});
});
new Setting(containerEl)
.setName("Sync")
.addButton((button) => {
button
.setButtonText("Sync Now")
.setIcon("sync")
.setTooltip("Synchronize with server")
.onClick(async () => {
await this.plugin.sync();
});
});
new Setting(containerEl)
.setName("Save")
.addButton((button) => {
button
.setButtonText("Save Settings")
.setCta()
.onClick(async () => {
await this.plugin.saveSettings();
new Notice("Settings saved!");
});
});
new Setting(containerEl)
.setName("Danger Zone")
.setDesc("Permanently delete all data")
.addButton((button) => {
button
.setButtonText("Delete All")
.setWarning()
.onClick(async () => {
const confirmed = confirm("Are you sure?");
if (confirmed) {
await this.plugin.deleteAllData();
}
});
});
const button = new ButtonComponent(containerEl)
.setButtonText("Submit")
.setDisabled(true);
// Enable later when conditions are met
if (isFormValid) {
button.setDisabled(false);
}
new Setting(containerEl)
.addButton((button) => {
button
.setIcon("trash")
.setTooltip("Delete item")
.setClass("icon-button")
.onClick(async () => {
await this.deleteItem();
});
});
const button = new ButtonComponent(containerEl)
.setButtonText("Process")
.onClick(async () => {
button.setDisabled(true);
button.setButtonText("Processing...");
try {
await this.plugin.processData();
new Notice("Success!");
} catch (error) {
new Notice("Error: " + error.message);
} finally {
button.setDisabled(false);
button.setButtonText("Process");
}
});
See Also
- Setting - Container for form components
- Modal - Dialog with buttons
- Notice - Toast notifications
