diff --git a/src/index.ts b/src/index.ts
index 1899daa..9a47d54 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -382,7 +382,7 @@ export default class PluginSample extends Plugin {
         let dialog = new Dialog({
             title: "SettingPannel",
             content: `<div id="SettingPanel" style="height: 100%;"></div>`,
-            width: "600px",
+            width: "800px",
             destroyCallback: (options) => {
                 console.log("destroyCallback", options);
                 //You'd better destroy the component when the dialog is closed
diff --git a/src/libs/setting-item.svelte b/src/libs/setting-item.svelte
index d59912b..ef1a964 100644
--- a/src/libs/setting-item.svelte
+++ b/src/libs/setting-item.svelte
@@ -14,11 +14,16 @@
         max: number;
         step: number;
     } = { min: 0, max: 100, step: 1 }; // Use it if type is slider
+    export let button: {
+        label: string;
+        callback: () => void;
+    } = { label: settingValue, callback: () => {} }; // Use it if type is button
 
     const dispatch = createEventDispatcher();
 
-    function clicked() {
-        dispatch("clicked");
+    function click() {
+        button?.callback();
+        dispatch("click", { key: settingKey });
     }
 
     function changed() {
@@ -66,9 +71,9 @@
         <button
             class="b3-button b3-button--outline fn__flex-center fn__size200"
             id={settingKey}
-            on:click={clicked}
+            on:click={click}
         >
-            {settingValue}
+            {button.label}
         </button>
     {:else if type === "select"}
         <!-- Dropdown select -->
diff --git a/src/libs/setting-panel.svelte b/src/libs/setting-panel.svelte
index fc5e508..038d890 100644
--- a/src/libs/setting-panel.svelte
+++ b/src/libs/setting-panel.svelte
@@ -3,7 +3,7 @@
  Author       : frostime
  Date         : 2023-07-01 19:23:50
  FilePath     : /src/libs/setting-panel.svelte
- LastEditTime : 2023-11-28 21:45:10
+ LastEditTime : 2024-04-27 16:46:49
  Description  : 
 -->
 <script lang="ts">
@@ -39,6 +39,7 @@
             placeholder={item?.placeholder}
             options={item?.options}
             slider={item?.slider}
+            button={item?.button}
             on:click={onClick}
             on:changed={onChanged}
         />
diff --git a/src/libs/setting-utils.ts b/src/libs/setting-utils.ts
index e0ff2bc..ddb576c 100644
--- a/src/libs/setting-utils.ts
+++ b/src/libs/setting-utils.ts
@@ -3,7 +3,7 @@
  * @Author       : frostime
  * @Date         : 2023-12-17 18:28:19
  * @FilePath     : /src/libs/setting-utils.ts
- * @LastEditTime : 2024-01-15 20:45:16
+ * @LastEditTime : 2024-04-27 16:38:09
  * @Description  : 
  */
 
@@ -329,5 +329,4 @@ export class SettingUtils {
                 break;
         }
     }
- 
 }
\ No newline at end of file
diff --git a/src/setting-example.svelte b/src/setting-example.svelte
index 5f8958b..4bafee5 100644
--- a/src/setting-example.svelte
+++ b/src/setting-example.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { showMessage } from "siyuan";
     import SettingPanel from "./libs/setting-panel.svelte";
 
     let groups: string[] = ["🌈 Default"];
@@ -43,6 +44,19 @@
                 max: 100,
                 step: 1
             }
+        },
+        {
+            type: 'button',
+            title: 'button',
+            description: 'This is a button',
+            key: 'e',
+            value: 'Click Button',
+            button: {
+                label: 'Click Me',
+                callback: () => {
+                    showMessage('Hello, world!');
+                }
+            }
         }
     ];
 
@@ -56,6 +70,8 @@
     const onChanged = ({ detail }: CustomEvent<ChangeEvent>) => {
         if (detail.group === groups[0]) {
             // setting.set(detail.key, detail.value);
+            //Please add your code here
+            //Udpate the plugins setting data, don't forget to call plugin.save() for data persistence
         }
     };
 </script>
@@ -83,6 +99,7 @@
             settingItems={SettingItems}
             display={focusGroup === groups[0]}
             on:changed={onChanged}
+            on:click={({ detail }) => { console.debug("Click:", detail.key); }}
         >
             <div class="fn__flex b3-label">
                 💡 This is our default settings.