Commit 0b8cbc7

@@ -53,6 +53,7 @@ if (!title) title = 'Astral Halo';
                             (typeof subItem.onclick === 'string'
                               ? { onclick: subItem.onclick }
                               : { id: 'side-' + subItem.onclick.id }))}
+                          {...(subItem.extraAttr || {})}
                           title={subItem.text}
                           aria-label={subItem.text}
                           class="btn-ghost btn-primary rounded-field"
@@ -77,6 +78,7 @@ if (!title) title = 'Astral Halo';
                     (typeof item.onclick === 'string'
                       ? { onclick: item.onclick }
                       : { id: 'side-' + item.onclick.id }))}
+                  {...(item.extraAttr || {})}
                   title={item.text}
                   aria-label={item.text}
                   class="btn-ghost join-item btn-primary"
@@ -103,6 +105,7 @@ if (!title) title = 'Astral Halo';
                   (typeof item.onclick === 'string'
                     ? { onclick: item.onclick }
                     : { id: 'nav-' + item.onclick.id }))}
+                {...(item.extraAttr || {})}
               >
                 <Icon name={item.icon} height="1.5rem" width="1.5rem" />
               </Button>
@@ -123,6 +126,7 @@ if (!title) title = 'Astral Halo';
                   (typeof item.onclick === 'string'
                     ? { onclick: item.onclick }
                     : { id: 'nav-' + item.onclick.id }))}
+                {...(item.extraAttr || {})}
               >
                 <Icon name={item.icon} height="1.5rem" width="1.5rem" />
               </Button>
@@ -182,6 +186,7 @@ if (!title) title = 'Astral Halo';
                             (typeof subItem.onclick === 'string'
                               ? { onclick: subItem.onclick }
                               : { id: 'side-' + subItem.onclick.id }))}
+                          {...(subItem.extraAttr || {})}
                           title={subItem.text}
                           aria-label={subItem.text}
                           useDefaultClass={false}
@@ -208,6 +213,7 @@ if (!title) title = 'Astral Halo';
                     (typeof item.onclick === 'string'
                       ? { onclick: item.onclick }
                       : { id: 'side-' + item.onclick.id }))}
+                  {...(item.extraAttr || {})}
                   title={item.text}
                   aria-label={item.text}
                   useDefaultClass={false}
@@ -232,6 +238,7 @@ if (!title) title = 'Astral Halo';
                 (typeof item.onclick === 'string'
                   ? { onclick: item.onclick }
                   : { id: 'side-' + item.onclick.id }))}
+              {...(item.extraAttr || {})}
               useDefaultClass={false}
             >
               <Icon name={item.icon} height="1.5rem" width="1.5rem" />

@@ -27,6 +27,7 @@ import TocButton from './widgets/SideToolBar/TocButton.vue';
               target={item.blank ? '_blank' : undefined}
               title={text}
               aria-label={text}
+              {...(item.extraAttr || {})}
             >
               <Icon name={icon} slot="icon" />
             </Button>
@@ -34,18 +35,28 @@ import TocButton from './widgets/SideToolBar/TocButton.vue';
         if ('onclick' in item) {
           if (typeof item.onclick === 'string')
             return (
-              <Button onclick={item.onclick} title={text} aria-label={text}>
+              <Button
+                onclick={item.onclick}
+                title={text}
+                aria-label={text}
+                {...(item.extraAttr || {})}
+              >
                 <Icon name={icon} slot="icon" />
               </Button>
             );
           return (
-            <Button id={`stb-${item.onclick!.id}`} title={text} aria-label={text}>
+            <Button
+              id={`stb-${item.onclick!.id}`}
+              title={text}
+              aria-label={text}
+              {...(item.extraAttr || {})}
+            >
               <Icon name={icon} slot="icon" />
             </Button>
           );
         }
         return (
-          <Button title={text} aria-label={text}>
+          <Button title={text} aria-label={text} {...(item.extraAttr || {})}>
             <Icon name={icon} slot="icon" />
           </Button>
         );

@@ -24,6 +24,12 @@ export type ButtonSubConfig<T extends string> = T extends 'text'
        * 按钮的文本。
        */
       text: string;
+      /**
+       * Extra attributes add to button HTML tag
+       *
+       * 添加到按钮 HTML 标签上的额外属性
+       */
+      extraAttr?: Record<string, string>;
     } & (
       | {
           /**
@@ -69,6 +75,12 @@ export type ButtonSubConfig<T extends string> = T extends 'text'
          * 按钮的文本。
          */
         text?: string;
+        /**
+         * Extra attributes add to button HTML tag
+         *
+         * 添加到按钮 HTML 标签上的额外属性
+         */
+        extraAttr?: Record<string, string>;
       } & (
         | {
             /**