diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 5a0a39af19..0dd9280036 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -25,6 +25,7 @@ const el = useTemplateRef('el')
 
 defineExpose({
   focus: () => el.value?.focus(),
+  getBoundingClientRect: () => el.value?.getBoundingClientRect(),
 })
 </script>
 
diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
index 67a9e9615f..65d1da3e49 100644
--- a/app/components/ReadmeTocDropdown.vue
+++ b/app/components/ReadmeTocDropdown.vue
@@ -79,8 +79,8 @@ function toggle() {
   if (isOpen.value) {
     close()
   } else {
-    if (triggerRef.value) {
-      const rect = triggerRef.value.getBoundingClientRect()
+    const rect = triggerRef.value?.getBoundingClientRect()
+    if (rect) {
       dropdownPosition.value = {
         top: rect.bottom + 4,
         right: rect.right,
@@ -145,18 +145,18 @@ function handleKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <button
+  <ButtonBase
     ref="triggerRef"
     type="button"
-    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.readme.toc_title')"
     :aria-controls="listboxId"
     @click="toggle"
     @keydown="handleKeydown"
+    classicon="i-carbon:list"
+    class="px-2.5 flex items-center"
   >
-    <span class="i-carbon:list w-3.5 h-3.5" aria-hidden="true" />
     <span
       class="i-carbon:chevron-down w-3 h-3"
       :class="[
@@ -165,7 +165,7 @@ function handleKeydown(event: KeyboardEvent) {
       ]"
       aria-hidden="true"
     />
-  </button>
+  </ButtonBase>
 
   <Teleport to="body">
     <Transition