From 1ab5a1699e8340601ca82cf008c028b8d7a8ff9a Mon Sep 17 00:00:00 2001
From: RYGRIT <ry_grit@sina.com>
Date: Tue, 10 Feb 2026 15:58:36 +0800
Subject: [PATCH 1/3] refactor(link-base): update size and tests

---
 app/components/Link/Base.vue          | 94 ++++++++++++++++-----------
 test/nuxt/a11y.spec.ts                | 29 +++++++--
 test/nuxt/components/LinkBase.spec.ts | 53 +++++++++++++++
 3 files changed, 131 insertions(+), 45 deletions(-)
 create mode 100644 test/nuxt/components/LinkBase.spec.ts

diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index eeb1b9bf9..fc0cda230 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -7,12 +7,11 @@ const props = withDefaults(
       /** Disabled links will be displayed as plain text */
       disabled?: boolean
       /**
-       * `type` should never be used, because this will always be a link.
-       * */
-      type?: never
-      variant?: 'button-primary' | 'button-secondary' | 'link'
-      size?: 'small' | 'medium'
-      block?: boolean
+       * Controls whether the link is styled as text or as a button.
+       */
+      type?: 'button' | 'link'
+      size?: 'xs' | 'sm' | 'md' | 'lg'
+      inline?: boolean
 
       ariaKeyshortcuts?: string
 
@@ -37,7 +36,7 @@ const props = withDefaults(
       noUnderline?: boolean
     } & NuxtLinkProps
   >(),
-  { variant: 'link', size: 'medium' },
+  { type: 'link', size: 'md', inline: true },
 )
 
 const isLinkExternal = computed(
@@ -50,47 +49,66 @@ const isLinkAnchor = computed(
   () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
 
-/** size is only applicable for button like links */
-const isLink = computed(() => props.variant === 'link')
-const isButton = computed(() => !isLink.value)
-const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
-const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const isLink = computed(() => props.type === 'link')
+const isButton = computed(() => props.type === 'button')
+const sizeClass = computed(() => {
+  if (isButton.value) {
+    switch (props.size) {
+      case 'xs':
+        return 'text-xs px-2 py-0.5'
+      case 'sm':
+        return 'text-sm px-4 py-2'
+      case 'md':
+        return 'text-base px-5 py-2.5'
+      case 'lg':
+        return 'text-lg px-6 py-3'
+    }
+  }
+
+  switch (props.size) {
+    case 'xs':
+      return 'text-xs'
+    case 'sm':
+      return 'text-sm'
+    case 'md':
+      return 'text-base'
+    case 'lg':
+      return 'text-lg'
+  }
+})
 </script>
 
 <template>
   <span
     v-if="disabled"
-    :class="{
-      'flex': block,
-      'inline-flex': !block,
-      'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
-        isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
-      'text-bg bg-fg': variant === 'button-primary',
-      'bg-transparent text-fg': variant === 'button-secondary',
-    }"
+    :class="[
+      inline ? 'inline-flex' : 'flex',
+      sizeClass,
+      {
+        'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+          isButton,
+        'bg-transparent text-fg': isButton,
+      },
+    ]"
     ><slot
   /></span>
   <NuxtLink
     v-else
     class="group/link gap-x-1 items-center"
-    :class="{
-      'flex': block,
-      'inline-flex': !block,
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
-        !isLinkAnchor && isLink && !noUnderline,
-      'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
-        isLink,
-      'justify-center font-mono border border-border rounded-md transition-all duration-200':
-        isButton,
-      'text-sm px-4 py-2': isButtonMedium,
-      'text-xs px-2 py-0.5': isButtonSmall,
-      'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
-        variant === 'button-secondary',
-      'text-bg bg-fg hover:(bg-fg/50 text-accent) focus-visible:(bg-fg/50) aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
-        variant === 'button-primary',
-    }"
+    :class="[
+      inline ? 'inline-flex' : 'flex',
+      sizeClass,
+      {
+        'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
+          !isLinkAnchor && isLink && !noUnderline,
+        'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+          isLink,
+        'justify-center font-mono border border-border rounded-md transition-all duration-200':
+          isButton,
+        'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
+          isButton,
+      },
+    ]"
     :to="to"
     :aria-keyshortcuts="ariaKeyshortcuts"
     :target="isLinkExternal ? '_blank' : undefined"
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index af4f3dd2d..1aa2772c7 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -380,7 +380,8 @@ describe('component accessibility audits', () => {
 
     it("should have no accessibility violations when it's the current link", async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', current: true },
+        props: { to: 'http://example.com' },
+        attrs: { 'aria-current': 'page' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -396,18 +397,18 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations as secondary button', async () => {
+    it('should have no accessibility violations as button link', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true, variant: 'button-secondary' },
+        props: { to: 'http://example.com', disabled: true, type: 'button' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations as primary button', async () => {
+    it('should have no accessibility violations as button link (large)', async () => {
       const component = await mountSuspended(LinkBase, {
-        props: { to: 'http://example.com', disabled: true, variant: 'button-primary' },
+        props: { to: 'http://example.com', disabled: true, type: 'button', size: 'lg' },
         slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
@@ -419,8 +420,22 @@ describe('component accessibility audits', () => {
         props: {
           to: 'http://example.com',
           disabled: true,
-          variant: 'button-secondary',
-          size: 'small',
+          type: 'button',
+          size: 'sm',
+        },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations as extra-small button', async () => {
+      const component = await mountSuspended(LinkBase, {
+        props: {
+          to: 'http://example.com',
+          disabled: true,
+          type: 'button',
+          size: 'xs',
         },
         slots: { default: 'Button link content' },
       })
diff --git a/test/nuxt/components/LinkBase.spec.ts b/test/nuxt/components/LinkBase.spec.ts
new file mode 100644
index 000000000..a90e0d6bb
--- /dev/null
+++ b/test/nuxt/components/LinkBase.spec.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import LinkBase from '~/components/Link/Base.vue'
+
+describe('LinkBase', () => {
+  it('renders a default text link with inline layout and medium size', async () => {
+    const wrapper = await mountSuspended(LinkBase, {
+      props: { to: '/about' },
+      slots: { default: 'About' },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.classes()).toContain('inline-flex')
+    expect(link.classes()).toContain('text-base')
+    expect(link.classes()).toContain('underline')
+  })
+
+  it('uses flex layout and small text size when inline is false', async () => {
+    const wrapper = await mountSuspended(LinkBase, {
+      props: { to: '/settings', size: 'sm', inline: false },
+      slots: { default: 'Settings' },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.classes()).toContain('flex')
+    expect(link.classes()).toContain('text-sm')
+  })
+
+  it('applies extra-small text size for links', async () => {
+    const wrapper = await mountSuspended(LinkBase, {
+      props: { to: '/compare', size: 'xs' },
+      slots: { default: 'Compare' },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.classes()).toContain('text-xs')
+  })
+
+  it('styles button links with size classes and no underline', async () => {
+    const wrapper = await mountSuspended(LinkBase, {
+      props: { to: '/compare', type: 'button', size: 'lg' },
+      slots: { default: 'Compare' },
+    })
+
+    const link = wrapper.get('a')
+    expect(link.classes()).toContain('border')
+    expect(link.classes()).toContain('rounded-md')
+    expect(link.classes()).toContain('text-lg')
+    expect(link.classes()).toContain('px-6')
+    expect(link.classes()).toContain('py-3')
+    expect(link.classes()).not.toContain('underline')
+  })
+})

From 6d3840d9a7ae51bc5e8f6456e57c8298106b3d3e Mon Sep 17 00:00:00 2001
From: RYGRIT <ry_grit@sina.com>
Date: Tue, 10 Feb 2026 16:00:15 +0800
Subject: [PATCH 2/3] fix: update LinkBase usage across app

---
 app/app.vue                                   |  6 +--
 app/components/AppFooter.vue                  | 13 ++---
 app/components/AppHeader.vue                  |  3 +-
 app/components/BuildEnvironment.vue           |  3 +-
 app/components/Code/FileTree.vue              |  5 +-
 app/components/CollapsibleSection.vue         |  2 +-
 app/components/Compare/ComparisonGrid.vue     | 11 ++--
 .../Compare/ReplacementSuggestion.vue         |  2 +-
 app/components/Package/Dependencies.vue       | 23 ++++++--
 app/components/Package/InstallScripts.vue     |  8 +--
 app/components/Package/Keywords.vue           |  4 +-
 app/components/Package/MetricsBadges.vue      |  4 +-
 app/components/Package/Versions.vue           | 25 ++++-----
 app/components/PackageProvenanceSection.vue   |  2 +-
 app/pages/about.vue                           | 36 ++++++-------
 app/pages/org/[org].vue                       |  6 +--
 app/pages/package-code/[...path].vue          | 16 +++---
 app/pages/package/[[org]]/[name].vue          | 54 +++++++++++--------
 app/pages/~[username]/index.vue               |  6 +--
 app/pages/~[username]/orgs.vue                |  5 +-
 20 files changed, 132 insertions(+), 102 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 2b0a58740..11f4c13d4 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -121,9 +121,9 @@ if (import.meta.client) {
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
-      $t('common.skip_link')
-    }}</LinkBase>
+    <LinkBase to="#main-content" type="button" class="skip-link" size="sm">
+      {{ $t('common.skip_link') }}
+    </LinkBase>
 
     <AppHeader :show-logo="!isHomepage" />
 
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index cf7961ecb..e2f549ba9 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -17,10 +17,10 @@ const showModal = () => modalRef.value?.showModal?.()
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
         <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
-          <LinkBase :to="{ name: 'about' }">
+          <LinkBase :to="{ name: 'about' }" size="xs">
             {{ $t('footer.about') }}
           </LinkBase>
-          <LinkBase :to="{ name: 'privacy' }">
+          <LinkBase :to="{ name: 'privacy' }" size="xs">
             {{ $t('privacy_policy.title') }}
           </LinkBase>
           <button
@@ -32,6 +32,7 @@ const showModal = () => modalRef.value?.showModal?.()
             {{ $t('footer.keyboard_shortcuts') }}
           </button>
 
+          <!-- Keyboard Shortcuts Modal -->
           <Modal
             ref="modalRef"
             :modalTitle="$t('footer.keyboard_shortcuts')"
@@ -89,16 +90,16 @@ const showModal = () => modalRef.value?.showModal?.()
               </li>
             </ul>
           </Modal>
-          <LinkBase to="https://docs.npmx.dev">
+          <LinkBase to="https://docs.npmx.dev" size="xs">
             {{ $t('footer.docs') }}
           </LinkBase>
-          <LinkBase to="https://repo.npmx.dev">
+          <LinkBase to="https://repo.npmx.dev" size="xs">
             {{ $t('footer.source') }}
           </LinkBase>
-          <LinkBase to="https://social.npmx.dev">
+          <LinkBase to="https://social.npmx.dev" size="xs">
             {{ $t('footer.social') }}
           </LinkBase>
-          <LinkBase to="https://chat.npmx.dev">
+          <LinkBase to="https://chat.npmx.dev" size="xs">
             {{ $t('footer.chat') }}
           </LinkBase>
         </div>
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index a55ea3217..b555e2aca 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -257,9 +257,10 @@ onKeyStroke(
           v-for="link in desktopLinks"
           :key="link.name"
           class="border-none"
-          variant="button-secondary"
+          type="button"
           :to="link.to"
           :aria-keyshortcuts="link.keyshortcut"
+          size="sm"
         >
           {{ link.label }}
         </LinkBase>
diff --git a/app/components/BuildEnvironment.vue b/app/components/BuildEnvironment.vue
index 53eed13cf..7a7241a49 100644
--- a/app/components/BuildEnvironment.vue
+++ b/app/components/BuildEnvironment.vue
@@ -24,6 +24,7 @@ const buildTime = computed(() => new Date(buildInfo.value.time))
     <LinkBase
       v-if="buildInfo.env === 'release'"
       :to="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
+      size="sm"
     >
       v{{ buildInfo.version }}
     </LinkBase>
@@ -31,7 +32,7 @@ const buildTime = computed(() => new Date(buildInfo.value.time))
 
     <template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
       <span>&middot;</span>
-      <LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`">
+      <LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`" size="xs">
         {{ buildInfo.shortCommit }}
       </LinkBase>
     </template>
diff --git a/app/components/Code/FileTree.vue b/app/components/Code/FileTree.vue
index c7b7434d9..f3dd735f2 100644
--- a/app/components/Code/FileTree.vue
+++ b/app/components/Code/FileTree.vue
@@ -80,11 +80,12 @@ watch(
       <!-- File -->
       <template v-else>
         <LinkBase
-          variant="button-secondary"
+          type="button"
           :to="getFileRoute(node.path)"
           :aria-current="currentPath === node.path"
           class="w-full justify-start! rounded-none! border-none!"
-          block
+          :inline="false"
+          size="sm"
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
           :classicon="getFileIcon(node.name)"
         >
diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 65a2a45cc..c4bf77c8a 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -103,7 +103,7 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`">
+        <LinkBase :to="`#${id}`" size="xs">
           {{ title }}
         </LinkBase>
       </component>
diff --git a/app/components/Compare/ComparisonGrid.vue b/app/components/Compare/ComparisonGrid.vue
index 3bf212957..e3a699db7 100644
--- a/app/components/Compare/ComparisonGrid.vue
+++ b/app/components/Compare/ComparisonGrid.vue
@@ -42,8 +42,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
           <span class="inline-flex items-center gap-1.5 truncate">
             <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="text-sm truncate"
-              block
+              class="truncate"
+              :inline="false"
+              size="sm"
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
               {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>
@@ -80,9 +81,9 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
                 <p class="text-xs text-fg-muted">
                   <i18n-t keypath="compare.no_dependency.tooltip_description" tag="span">
                     <template #link>
-                      <LinkBase to="https://e18e.dev/docs/replacements/">{{
-                        $t('compare.no_dependency.e18e_community')
-                      }}</LinkBase>
+                      <LinkBase to="https://e18e.dev/docs/replacements/" size="xs">
+                        {{ $t('compare.no_dependency.e18e_community') }}
+                      </LinkBase>
                     </template>
                   </i18n-t>
                 </p>
diff --git a/app/components/Compare/ReplacementSuggestion.vue b/app/components/Compare/ReplacementSuggestion.vue
index 1fd54f514..34d21a28e 100644
--- a/app/components/Compare/ReplacementSuggestion.vue
+++ b/app/components/Compare/ReplacementSuggestion.vue
@@ -73,7 +73,7 @@ const docUrl = computed(() => {
     </ButtonBase>
 
     <!-- Info link -->
-    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
+    <LinkBase v-else-if="docUrl" :to="docUrl" type="button" size="xs">
       {{ $t('package.replacement.learn_more') }}
     </LinkBase>
   </div>
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index bab0a08fc..e8a34a6dc 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -91,7 +91,7 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
+          <LinkBase :to="packageRoute(dep)" :inline="false" class="truncate" dir="ltr" size="sm">
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
@@ -111,6 +111,7 @@ const numberFormatter = useNumberFormatter()
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
               classicon="i-carbon:security"
+              size="sm"
             >
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
             </LinkBase>
@@ -120,6 +121,7 @@ const numberFormatter = useNumberFormatter()
               class="shrink-0 text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
               classicon="i-carbon:warning-hex"
+              size="sm"
             >
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
@@ -128,6 +130,7 @@ const numberFormatter = useNumberFormatter()
               class="block truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version"
+              size="sm"
             >
               {{ version }}
             </LinkBase>
@@ -178,7 +181,13 @@ const numberFormatter = useNumberFormatter()
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-1 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(peer.name)" class="block truncate" dir="ltr">
+            <LinkBase
+              :to="packageRoute(peer.name)"
+              :inline="false"
+              class="truncate"
+              dir="ltr"
+              size="sm"
+            >
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -187,9 +196,11 @@ const numberFormatter = useNumberFormatter()
           </div>
           <LinkBase
             :to="packageRoute(peer.name, peer.version)"
-            class="block truncate max-w-[40%]"
+            :inline="false"
+            class="truncate max-w-[40%]"
             :title="peer.version"
             dir="ltr"
+            size="sm"
           >
             {{ peer.version }}
           </LinkBase>
@@ -239,14 +250,16 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
+          <LinkBase :to="packageRoute(dep)" :inline="false" class="truncate" dir="ltr" size="sm">
             {{ dep }}
           </LinkBase>
           <LinkBase
             :to="packageRoute(dep, version)"
-            class="block truncate"
+            :inline="false"
+            class="truncate"
             :title="version"
             dir="ltr"
+            size="sm"
           >
             {{ version }}
           </LinkBase>
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index b7747042d..07b1b173f 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -59,10 +59,10 @@ const isExpanded = shallowRef(false)
         >
           <template v-if="installScripts.content?.[scriptName] && scriptParts[scriptName]">
             <template v-if="scriptParts[scriptName].prefix">
-              {{ scriptParts[scriptName].prefix
-              }}<LinkBase :to="scriptParts[scriptName].link">{{
-                scriptParts[scriptName].filePath
-              }}</LinkBase>
+              {{ scriptParts[scriptName].prefix }}
+              <LinkBase :to="scriptParts[scriptName].link" text="sm">
+                {{ scriptParts[scriptName].filePath }}
+              </LinkBase>
             </template>
             <LinkBase v-else :to="scriptParts[scriptName].link">
               {{ installScripts.content[scriptName] }}
diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue
index 2328d0edb..e01f24983 100644
--- a/app/components/Package/Keywords.vue
+++ b/app/components/Package/Keywords.vue
@@ -8,8 +8,8 @@ defineProps<{
     <ul class="flex flex-wrap gap-1.5 list-none m-0 p-1">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
         <LinkBase
-          variant="button-secondary"
-          size="small"
+          type="button"
+          size="xs"
           :to="{ name: 'search', query: { q: `keywords:${keyword}` } }"
         >
           {{ keyword }}
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 356047315..5697fb8a6 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -60,8 +60,8 @@ const typesHref = computed(() => {
       <TooltipApp :text="typesTooltip">
         <LinkBase
           v-if="typesHref"
-          variant="button-secondary"
-          size="small"
+          type="button"
+          size="xs"
           :to="typesHref"
           classicon="i-carbon-checkmark"
         >
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 5f9fd0221..2927acb94 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -305,7 +305,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
   >
     <template #actions>
       <LinkBase
-        variant="button-secondary"
+        type="button"
+        size="sm"
         :to="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
         :title="$t('package.downloads.community_distribution')"
         classicon="i-carbon:load-balancer-network"
@@ -356,8 +357,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="overflow-hidden">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                block
-                class="text-sm"
+                :inline="false"
+                size="sm"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
@@ -413,8 +414,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(v.version)"
-                block
-                class="text-xs"
+                :inline="false"
+                size="xs"
                 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
                   v.deprecated
@@ -511,8 +512,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                block
-                class="text-xs"
+                :inline="false"
+                size="xs"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
@@ -584,8 +585,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      block
-                      class="text-xs"
+                      :inline="false"
+                      size="xs"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -645,7 +646,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      block
+                      :inline="false"
                       class="text-xs ms-6"
                       :class="
                         group.versions[0]?.deprecated
@@ -705,8 +706,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center justify-between gap-2">
                     <LinkBase
                       :to="versionRoute(v.version)"
-                      block
-                      class="text-xs"
+                      :inline="false"
+                      size="xs"
                       :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="
                         v.deprecated
diff --git a/app/components/PackageProvenanceSection.vue b/app/components/PackageProvenanceSection.vue
index caf6cd36d..f313fa54d 100644
--- a/app/components/PackageProvenanceSection.vue
+++ b/app/components/PackageProvenanceSection.vue
@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <section id="provenance" aria-labelledby="provenance-heading" class="scroll-mt-20">
     <h2 id="provenance-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
-      <LinkBase to="#provenance">
+      <LinkBase to="#provenance" size="xs">
         {{ $t('package.provenance_section.title') }}
       </LinkBase>
     </h2>
diff --git a/app/pages/about.vue b/app/pages/about.vue
index be344b577..e8742a818 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -95,34 +95,34 @@ const { data: contributors, status: contributorsStatus } = useLazyFetch('/api/co
                 >
                   <template #already>{{ $t('about.what_we_are_not.words.already') }}</template>
                   <template #people>
-                    <LinkBase :to="pmLinks.npm" class="font-sans">{{
-                      $t('about.what_we_are_not.words.people')
-                    }}</LinkBase>
+                    <LinkBase :to="pmLinks.npm" class="font-sans">
+                      {{ $t('about.what_we_are_not.words.people') }}
+                    </LinkBase>
                   </template>
                   <template #building>
-                    <LinkBase :to="pmLinks.pnpm" class="font-sans">{{
-                      $t('about.what_we_are_not.words.building')
-                    }}</LinkBase>
+                    <LinkBase :to="pmLinks.pnpm" class="font-sans">
+                      {{ $t('about.what_we_are_not.words.building') }}
+                    </LinkBase>
                   </template>
                   <template #really>
-                    <LinkBase :to="pmLinks.yarn" class="font-sans">{{
-                      $t('about.what_we_are_not.words.really')
-                    }}</LinkBase>
+                    <LinkBase :to="pmLinks.yarn" class="font-sans">
+                      {{ $t('about.what_we_are_not.words.really') }}
+                    </LinkBase>
                   </template>
                   <template #cool>
-                    <LinkBase :to="pmLinks.bun" class="font-sans">{{
-                      $t('about.what_we_are_not.words.cool')
-                    }}</LinkBase>
+                    <LinkBase :to="pmLinks.bun" class="font-sans">
+                      {{ $t('about.what_we_are_not.words.cool') }}
+                    </LinkBase>
                   </template>
                   <template #package>
-                    <LinkBase :to="pmLinks.deno" class="font-sans">{{
-                      $t('about.what_we_are_not.words.package')
-                    }}</LinkBase>
+                    <LinkBase :to="pmLinks.deno" class="font-sans">
+                      {{ $t('about.what_we_are_not.words.package') }}
+                    </LinkBase>
                   </template>
                   <template #managers>
-                    <LinkBase :to="pmLinks.vlt" class="font-sans">{{
-                      $t('about.what_we_are_not.words.managers')
-                    }}</LinkBase>
+                    <LinkBase :to="pmLinks.vlt" class="font-sans">
+                      {{ $t('about.what_we_are_not.words.managers') }}
+                    </LinkBase>
                   </template>
                 </i18n-t>
               </span>
diff --git a/app/pages/org/[org].vue b/app/pages/org/[org].vue
index 08739fd43..338566d34 100644
--- a/app/pages/org/[org].vue
+++ b/app/pages/org/[org].vue
@@ -244,9 +244,9 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
-        $t('common.go_back_home')
-      }}</LinkBase>
+      <LinkBase type="button" :to="{ name: 'index' }">
+        {{ $t('common.go_back_home') }}
+      </LinkBase>
     </div>
 
     <!-- Empty state -->
diff --git a/app/pages/package-code/[...path].vue b/app/pages/package-code/[...path].vue
index b3b4a02bd..f9a805b86 100644
--- a/app/pages/package-code/[...path].vue
+++ b/app/pages/package-code/[...path].vue
@@ -374,9 +374,9 @@ defineOgImageComponent('Default', {
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
-      <LinkBase variant="button-secondary" :to="packageRoute(packageName)">{{
-        $t('code.go_to_package')
-      }}</LinkBase>
+      <LinkBase type="button" :to="packageRoute(packageName)">
+        {{ $t('code.go_to_package') }}
+      </LinkBase>
     </div>
 
     <!-- Loading state -->
@@ -388,9 +388,9 @@ defineOgImageComponent('Default', {
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
-      <LinkBase variant="button-secondary" :to="packageRoute(packageName, version)">{{
-        $t('code.back_to_package')
-      }}</LinkBase>
+      <LinkBase type="button" :to="packageRoute(packageName, version)">
+        {{ $t('code.back_to_package') }}
+      </LinkBase>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -495,7 +495,7 @@ defineOgImageComponent('Default', {
             }}
           </p>
           <LinkBase
-            variant="button-secondary"
+            type="button"
             :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
           >
             {{ $t('code.view_raw') }}
@@ -546,7 +546,7 @@ defineOgImageComponent('Default', {
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
           <LinkBase
-            variant="button-secondary"
+            type="button"
             :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
           >
             {{ $t('code.view_raw') }}
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 2fac440f4..dc6dd5f30 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -566,7 +566,11 @@ onKeyStroke(
               :title="pkg.name"
               dir="ltr"
             >
-              <LinkBase v-if="orgName" :to="{ name: 'org', params: { org: orgName } }">
+              <LinkBase
+                v-if="orgName"
+                :to="{ name: 'org', params: { org: orgName } }"
+                class="text-2xl sm:text-3xl"
+              >
                 @{{ orgName }}
               </LinkBase>
               <span v-if="orgName">/</span>
@@ -609,8 +613,9 @@ onKeyStroke(
               :to="packageRoute(pkg.name, resolvedVersion)"
               :title="$t('package.view_permalink')"
               dir="ltr"
-              >{{ resolvedVersion }}</LinkBase
             >
+              {{ resolvedVersion }}
+            </LinkBase>
             <span dir="ltr" v-else>v{{ resolvedVersion }}</span>
 
             <template v-if="hasProvenance(displayVersion)">
@@ -625,8 +630,8 @@ onKeyStroke(
                 position="bottom"
               >
                 <LinkBase
-                  variant="button-secondary"
-                  size="small"
+                  type="button"
+                  size="xs"
                   to="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
                   classicon="i-lucide-shield-check"
@@ -649,27 +654,30 @@ onKeyStroke(
             :class="$style.packageNav"
           >
             <LinkBase
-              variant="button-secondary"
+              type="button"
               v-if="docsLink"
               :to="docsLink"
               aria-keyshortcuts="d"
               classicon="i-carbon:document"
+              size="sm"
             >
               {{ $t('package.links.docs') }}
             </LinkBase>
             <LinkBase
-              variant="button-secondary"
+              type="button"
               :to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
               aria-keyshortcuts="."
               classicon="i-carbon:code"
+              size="sm"
             >
               {{ $t('package.links.code') }}
             </LinkBase>
             <LinkBase
-              variant="button-secondary"
+              type="button"
               :to="{ name: 'compare', query: { packages: pkg.name } }"
               aria-keyshortcuts="c"
               classicon="i-carbon:compare"
+              size="sm"
             >
               {{ $t('package.links.compare') }}
             </LinkBase>
@@ -745,7 +753,7 @@ onKeyStroke(
             class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm"
           >
             <li v-if="repositoryUrl">
-              <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
+              <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon" size="sm">
                 <span v-if="repoRef">
                   {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
                 </span>
@@ -753,23 +761,23 @@ onKeyStroke(
               </LinkBase>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
-              <LinkBase :to="starsLink" classicon="i-carbon:star">
+              <LinkBase :to="starsLink" classicon="i-carbon:star" size="sm">
                 {{ compactNumberFormatter.format(stars) }}
               </LinkBase>
             </li>
             <li v-if="forks && forksLink">
-              <LinkBase :to="forksLink" classicon="i-carbon:fork">
+              <LinkBase :to="forksLink" classicon="i-carbon:fork" size="sm">
                 {{ compactNumberFormatter.format(forks) }}
               </LinkBase>
             </li>
             <li class="basis-full sm:hidden" />
             <li v-if="homepageUrl">
-              <LinkBase :to="homepageUrl" classicon="i-carbon:link">
+              <LinkBase :to="homepageUrl" classicon="i-carbon:link" size="sm">
                 {{ $t('package.links.homepage') }}
               </LinkBase>
             </li>
             <li v-if="displayVersion?.bugs?.url">
-              <LinkBase :to="displayVersion.bugs.url" classicon="i-carbon:warning">
+              <LinkBase :to="displayVersion.bugs.url" classicon="i-carbon:warning" size="sm">
                 {{ $t('package.links.issues') }}
               </LinkBase>
             </li>
@@ -778,6 +786,7 @@ onKeyStroke(
                 :to="`https://www.npmjs.com/package/${pkg.name}`"
                 :title="$t('common.view_on_npm')"
                 classicon="i-carbon:logo-npm"
+                size="sm"
               >
                 npm
               </LinkBase>
@@ -787,12 +796,13 @@ onKeyStroke(
                 :to="jsrInfo.url"
                 :title="$t('badges.jsr.title')"
                 classicon="i-simple-icons:jsr"
+                size="sm"
               >
                 {{ $t('package.links.jsr') }}
               </LinkBase>
             </li>
             <li v-if="fundingUrl">
-              <LinkBase :to="fundingUrl" classicon="i-carbon:favorite">
+              <LinkBase :to="fundingUrl" classicon="i-carbon:favorite" size="sm">
                 {{ $t('package.links.fund') }}
               </LinkBase>
             </li>
@@ -872,8 +882,8 @@ onKeyStroke(
               </span>
               <ButtonGroup v-if="getDependencyCount(displayVersion) > 0">
                 <LinkBase
-                  variant="button-secondary"
-                  size="small"
+                  type="button"
+                  size="xs"
                   :to="`https://npmgraph.js.org/?q=${pkg.name}`"
                   :title="$t('package.stats.view_dependency_graph')"
                   classicon="i-carbon:network-3"
@@ -882,8 +892,8 @@ onKeyStroke(
                 </LinkBase>
 
                 <LinkBase
-                  variant="button-secondary"
-                  size="small"
+                  type="button"
+                  size="xs"
                   :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                   :title="$t('package.stats.inspect_dependency_tree')"
                   classicon="i-carbon:tree-view"
@@ -1024,7 +1034,7 @@ onKeyStroke(
             id="get-started-heading"
             class="group text-xs text-fg-subtle uppercase tracking-wider"
           >
-            <LinkBase to="#get-started">
+            <LinkBase to="#get-started" size="xs">
               {{ $t('package.get_started.title') }}
             </LinkBase>
           </h2>
@@ -1157,7 +1167,7 @@ onKeyStroke(
       <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
         <div class="flex flex-wrap items-center justify-between mb-3 px-1">
           <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
-            <LinkBase to="#readme">
+            <LinkBase to="#readme" size="xs">
               {{ $t('package.readme.title') }}
             </LinkBase>
           </h2>
@@ -1315,9 +1325,9 @@ onKeyStroke(
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
-        $t('common.go_back_home')
-      }}</LinkBase>
+      <LinkBase type="button" :to="{ name: 'index' }">
+        {{ $t('common.go_back_home') }}
+      </LinkBase>
     </div>
   </main>
 </template>
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
index 84d971335..218469991 100644
--- a/app/pages/~[username]/index.vue
+++ b/app/pages/~[username]/index.vue
@@ -186,9 +186,9 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
-        $t('common.go_back_home')
-      }}</LinkBase>
+      <LinkBase type="button" :to="{ name: 'index' }">
+        {{ $t('common.go_back_home') }}
+      </LinkBase>
     </div>
 
     <!-- Package list -->
diff --git a/app/pages/~[username]/orgs.vue b/app/pages/~[username]/orgs.vue
index 06c7f6ad2..027de2f8f 100644
--- a/app/pages/~[username]/orgs.vue
+++ b/app/pages/~[username]/orgs.vue
@@ -161,11 +161,12 @@ defineOgImageComponent('Default', {
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
         <LinkBase
-          variant="button-secondary"
+          type="button"
           :to="{ name: '~username-orgs', params: { username: npmUser! } }"
           class="mt-4"
-          >{{ $t('user.orgs_page.view_your_orgs') }}</LinkBase
         >
+          {{ $t('user.orgs_page.view_your_orgs') }}
+        </LinkBase>
       </div>
 
       <!-- Loading state -->

From da94380ed5bffc3cc6b341ee4235d6ed6e4a0904 Mon Sep 17 00:00:00 2001
From: RYGRIT <ry_grit@sina.com>
Date: Tue, 10 Feb 2026 16:22:47 +0800
Subject: [PATCH 3/3] fix: update LinkBase size prop in InstallScripts
 component

---
 app/components/Package/InstallScripts.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index 07b1b173f..cf377cbe2 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -60,7 +60,7 @@ const isExpanded = shallowRef(false)
           <template v-if="installScripts.content?.[scriptName] && scriptParts[scriptName]">
             <template v-if="scriptParts[scriptName].prefix">
               {{ scriptParts[scriptName].prefix }}
-              <LinkBase :to="scriptParts[scriptName].link" text="sm">
+              <LinkBase :to="scriptParts[scriptName].link" size="sm">
                 {{ scriptParts[scriptName].filePath }}
               </LinkBase>
             </template>