feat: extract button and link component, unify and improve design (#1071)

Co-authored-by: Robin <[e-mail]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Nathan Knowler <[e-mail]>
Co-authored-by: Daniel Roe <[e-mail]>

app/app.vue

···
 <template>
   <div class="min-h-screen flex flex-col bg-bg text-fg">
     <NuxtPwaAssets />
-    <a href="#main-content" class="skip-link font-mono">{{ $t('common.skip_link') }}</a>
+    <LinkBase to="#main-content" variant="button-primary" class="skip-link">{{
+      $t('common.skip_link')
+    }}</LinkBase>
 
     <AppHeader :show-logo="!isHomepage" />
 
···
 .skip-link {
   position: fixed;
   top: -100%;
-  inset-inline-start: 0;
-  padding: 0.5rem 1rem;
-  background: var(--fg);
-  color: var(--bg);
-  font-size: 0.875rem;
   z-index: 100;
-  transition: top 0.2s ease;
 }
 
-.skip-link:hover {
-  color: var(--bg);
-  text-decoration: underline;
-}
 .skip-link:focus {
   top: 0;
 }

app/assets/main.css

···
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
+  /* Offset for fixed header - otherwise anchor headers are cutted */
+  scroll-padding-top: 5rem;
   scrollbar-gutter: stable;
 }
 
···
   line-height: 1.6;
 }
 
-/* Default link styling for accessibility on dark background */
-a {
-  color: var(--fg);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-color: var(--fg-subtle);
-  transition:
-    color 0.2s ease,
-    text-decoration-color 0.2s ease;
-}
-
-a:hover {
-  color: var(--accent);
-  text-decoration-color: var(--accent);
-}
-
-a:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
+:focus-visible,
+:-moz-focusring {
+  /* weird Firefox behavior makes it necessary to add `!important` 
+  or otherwise the selector would need to be more specific,
+  which it explicitly should not be. */
+  outline: 2px solid var(--accent) !important;
+  outline-offset: 2px !important;
 }
 
 /* Reset dd margin (browser default is margin-left: 40px) */
···
 
 /* Reset button styles */
 button {
-  background: transparent;
-  border: none;
   cursor: pointer;
-  font: inherit;
-  padding: 0;
-}
-
-button:focus-visible,
-select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
 }
 
 /* Selection */

app/components/AppFooter.vue

···
           <BuildEnvironment v-if="!isHome" footer />
         </div>
         <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
-        <div class="hidden sm:flex items-center gap-6 min-h-11">
-          <NuxtLink :to="{ name: 'about' }" class="link-subtle font-mono text-xs flex items-center">
+        <div class="hidden sm:flex items-center gap-6 min-h-11 text-xs">
+          <LinkBase :to="{ name: 'about' }">
             {{ $t('footer.about') }}
-          </NuxtLink>
-          <NuxtLink
-            :to="{ name: 'privacy' }"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
-          </NuxtLink>
-          <a
-            href="https://docs.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase to="https://docs.npmx.dev">
             {{ $t('footer.docs') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://repo.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase to="https://repo.npmx.dev">
             {{ $t('footer.source') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://social.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase to="https://social.npmx.dev">
             {{ $t('footer.social') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
-          <a
-            href="https://chat.npmx.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs flex items-center gap-1"
-          >
+          </LinkBase>
+          <LinkBase to="https://chat.npmx.dev">
             {{ $t('footer.chat') }}
-            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
-          </a>
+          </LinkBase>
         </div>
       </div>
       <p class="text-xs text-fg-muted text-center sm:text-start m-0">

app/components/AppHeader.vue

···
 <script setup lang="ts">
+import { LinkBase } from '#components'
 import { isEditableElement } from '~/utils/input'
 
 withDefaults(
···
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="flex-shrink-0 flex items-center gap-0.5 sm:gap-2">
+      <div class="hidden sm:flex flex-shrink-0">
         <!-- Desktop: Compare link -->
-        <NuxtLink
+        <LinkBase
+          class="border-none"
+          variant="button-secondary"
           :to="{ name: 'compare' }"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
-          aria-keyshortcuts="c"
+          keyshortcut="c"
         >
           {{ $t('nav.compare') }}
-          <kbd
-            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-            aria-hidden="true"
-          >
-            c
-          </kbd>
-        </NuxtLink>
+        </LinkBase>
 
         <!-- Desktop: Settings link -->
-        <NuxtLink
+        <LinkBase
+          class="border-none"
+          variant="button-secondary"
           :to="{ name: 'settings' }"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 px-2 py-1.5 hover:bg-bg-subtle focus-visible:outline-accent/70 rounded"
-          aria-keyshortcuts=","
+          keyshortcut=","
         >
           {{ $t('nav.settings') }}
-          <kbd
-            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-            aria-hidden="true"
-          >
-            ,
-          </kbd>
-        </NuxtLink>
+        </LinkBase>
 
-        <!-- Desktop: Account menu -->
-        <div class="hidden sm:block">
-          <HeaderAccountMenu />
-        </div>
-
-        <!-- Mobile: Menu button (always visible, click to open menu) -->
-        <button
-          type="button"
-          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
-          :aria-label="$t('nav.open_menu')"
-          @click="showMobileMenu = true"
-        >
-          <span class="w-6 h-6 inline-block i-carbon:menu" aria-hidden="true" />
-        </button>
+        <HeaderAccountMenu />
       </div>
+
+      <!-- Mobile: Menu button (always visible, click to open menu) -->
+      <ButtonBase
+        type="button"
+        class="sm:hidden flex"
+        :aria-label="$t('nav.open_menu')"
+        :aria-expanded="showMobileMenu"
+        @click="showMobileMenu = !showMobileMenu"
+        classicon="i-carbon:menu"
+      />
     </nav>
 
     <!-- Mobile menu -->

app/components/BuildEnvironment.vue

···
       <NuxtTime :datetime="buildInfo.time" :locale="locale" relative />
     </i18n-t>
     <span>&middot;</span>
-    <NuxtLink
+    <LinkBase
       v-if="buildInfo.env === 'release'"
-      external
-      :href="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
-      target="_blank"
-      class="hover:text-fg transition-colors"
+      :to="`https://github.com/npmx-dev/npmx.dev/tag/v${buildInfo.version}`"
     >
       v{{ buildInfo.version }}
-    </NuxtLink>
+    </LinkBase>
     <span v-else class="tracking-wider">{{ buildInfo.env }}</span>
 
     <template v-if="buildInfo.commit && buildInfo.branch !== 'release'">
       <span>&middot;</span>
-      <NuxtLink
-        external
-        :href="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`"
-        target="_blank"
-        class="hover:text-fg transition-colors"
-      >
+      <LinkBase :to="`https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}`">
         {{ buildInfo.shortCommit }}
-      </NuxtLink>
+      </LinkBase>
     </template>
   </div>
 </template>

app/components/Button/Base.vue

···
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    'disabled'?: boolean
+    'type'?: 'button' | 'submit'
+    'variant'?: 'primary' | 'secondary'
+    'size'?: 'small' | 'medium'
+    'keyshortcut'?: string
+
+    /**
+     * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
+     */
+    'aria-keyshortcuts'?: never
+
+    'classicon'?: string
+  }>(),
+  {
+    type: 'button',
+    variant: 'secondary',
+    size: 'medium',
+  },
+)
+
+const el = useTemplateRef('el')
+
+defineExpose({
+  focus: () => el.value?.focus(),
+})
+</script>
+
+<template>
+  <button
+    ref="el"
+    class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    :class="{
+      'text-sm px-4 py-2': size === 'medium',
+      'text-xs px-2 py-0.5': size === 'small',
+      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(bg-fg text-bg/50))':
+        variant === 'secondary',
+      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
+        variant === 'primary',
+    }"
+    :type="props.type"
+    :disabled="
+      /**
+       * Unfortunately Vue _sometimes_ doesn't handle `disabled` correct,
+       * resulting in an invalid `disabled=false` attribute in the final HTML.
+       *
+       * This fixes this.
+       */
+      disabled ? true : undefined
+    "
+    :aria-keyshortcuts="keyshortcut"
+  >
+    <span
+      v-if="classicon"
+      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
+      aria-hidden="true"
+    />
+    <slot />
+    <kbd
+      v-if="keyshortcut"
+      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      aria-hidden="true"
+    >
+      {{ keyshortcut }}
+    </kbd>
+  </button>
+</template>

app/components/Button/Group.vue

···
+<script setup lang="ts">
+const props = defineProps<{
+  as?: string | Component
+}>()
+</script>
+
+<template>
+  <component
+    :is="props.as || 'div'"
+    class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+  >
+    <slot />
+  </component>
+</template>

app/components/ColumnPicker.vue

···
 
 <template>
   <div class="relative">
-    <button
+    <ButtonBase
       ref="buttonRef"
-      type="button"
-      class="btn-ghost inline-flex items-center gap-1.5 px-3 py-1.5 border border-border rounded-md hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       :aria-controls="menuId"
       @click.stop="isOpen = !isOpen"
+      classicon="i-carbon-column"
     >
-      <span class="i-carbon-column w-4 h-4" aria-hidden="true" />
-      <span class="font-mono text-sm">{{ $t('filters.columns.title') }}</span>
-    </button>
+      {{ $t('filters.columns.title') }}
+    </ButtonBase>
 
     <Transition name="dropdown">
       <div
···
           </div>
 
           <div class="border-t border-border py-1">
-            <button
-              type="button"
-              class="w-full px-3 py-2 text-start text-sm font-mono text-fg-muted hover:bg-bg-muted hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset"
-              @click="handleReset"
-            >
+            <ButtonBase @click="handleReset">
               {{ $t('filters.columns.reset') }}
-            </button>
+            </ButtonBase>
           </div>
         </div>
       </div>

app/components/Filter/Panel.vue

···
             {{ $t('filters.keywords') }}
           </legend>
           <div class="flex flex-wrap gap-1.5" role="group" :aria-label="$t('filters.keywords')">
-            <TagButton
+            <ButtonBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              :pressed="filters.keywords.includes(keyword)"
+              size="small"
+              :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}
-            </TagButton>
+            </ButtonBase>
             <button
               v-if="hasMoreKeywords"
               type="button"

app/components/Header/AccountMenu.client.vue

···
 
 <template>
   <div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
-    <button
+    <ButtonBase
       type="button"
-      class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-accent/70"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"
+      class="border-none"
     >
       <!-- Stacked avatars when connected -->
       <div
···
       >
         {{ operationCount }}
       </span>
-    </button>
+    </ButtonBase>
 
     <!-- Dropdown menu -->
     <Transition

app/components/Header/AuthModal.client.vue

···
         </details>
       </div>
 
-      <button
-        type="submit"
-        :disabled="!handleInput.trim()"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-      >
+      <ButtonBase type="submit" variant="primary" :disabled="!handleInput.trim()" class="w-full">
         {{ $t('auth.modal.connect') }}
-      </button>
-      <button
-        type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
-        @click="handleCreateAccount"
-      >
+      </ButtonBase>
+      <ButtonBase type="button" variant="primary" class="w-full" @click="handleCreateAccount">
         {{ $t('auth.modal.create_account') }}
-      </button>
+      </ButtonBase>
       <hr class="color-border" />
-      <button
+      <ButtonBase
         type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg flex items-center justify-center gap-2"
+        variant="primary"
+        class="w-full flex items-center justify-center gap-2"
         @click="handleBlueskySignIn"
       >
         {{ $t('auth.modal.connect_bluesky') }}
···
             d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
           ></path>
         </svg>
-      </button>
+      </ButtonBase>
     </form>
   </Modal>
 </template>

app/components/Header/ConnectorModal.vue

···
         </p>
       </div>
 
-      <button
+      <ButtonBase
         type="submit"
+        variant="primary"
         :disabled="!tokenInput.trim() || isConnecting"
-        class="w-full px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70 focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+        class="w-full"
       >
         {{ isConnecting ? $t('connector.modal.connecting') : $t('connector.modal.connect') }}
-      </button>
+      </ButtonBase>
     </form>
   </Modal>
 </template>

app/components/Link/Base.vue

···
+<script setup lang="ts">
+import type { NuxtLinkProps } from '#app'
+
+const props = withDefaults(
+  defineProps<
+    {
+      /** 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'
+
+      'keyshortcut'?: string
+
+      /**
+       * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
+       */
+      'aria-keyshortcuts'?: never
+
+      /**
+       * Don't use this directly. This will automatically be set to `_blank` for external links passed via `to`.
+       */
+      'target'?: never
+
+      /**
+       * Don't use this directly. This will automatically be set for external links passed via `to`.
+       */
+      'rel'?: never
+
+      'classicon'?: string
+
+      'to'?: NuxtLinkProps['to']
+
+      /** always use `to` instead of `href` */
+      'href'?: never
+    } & NuxtLinkProps
+  >(),
+  { variant: 'link', size: 'medium' },
+)
+
+const isLinkExternal = computed(
+  () =>
+    !!props.to &&
+    typeof props.to === 'string' &&
+    (props.to.startsWith('http:') || props.to.startsWith('https:') || props.to.startsWith('//')),
+)
+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(() => props.variant !== 'link')
+const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
+const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
+</script>
+
+<template>
+  <span
+    v-if="disabled"
+    :class="{
+      'opacity-50 inline-flex 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',
+    }"
+    ><slot
+  /></span>
+  <NuxtLink
+    v-else
+    class="group inline-flex gap-x-1 items-center justify-center"
+    :class="{
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
+      'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+        isLink,
+      '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) focus-visible:(bg-fg/10)':
+        variant === 'button-secondary',
+      'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
+    }"
+    :to="to"
+    :aria-keyshortcuts="keyshortcut"
+    :target="isLinkExternal ? '_blank' : undefined"
+  >
+    <span
+      v-if="classicon"
+      :class="[isButtonSmall ? 'size-3' : 'size-4', classicon]"
+      aria-hidden="true"
+    />
+    <slot />
+    <!-- automatically show icon indicating external link -->
+    <span
+      v-if="isLinkExternal && !classicon"
+      class="i-carbon:launch rtl-flip w-3 h-3 opacity-50"
+      aria-hidden="true"
+    />
+    <span
+      v-else-if="isLinkAnchor && isLink"
+      class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+      aria-hidden="true"
+    />
+    <kbd
+      v-if="keyshortcut"
+      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      aria-hidden="true"
+    >
+      {{ keyshortcut }}
+    </kbd>
+  </NuxtLink>
+</template>

app/components/Modal.client.vue

···
         <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
           {{ modalTitle }}
         </h2>
-        <button
+        <ButtonBase
           type="button"
-          class="text-fg-subtle w-8 h-8 p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
-        >
-          <span class="i-carbon-close w-5 h-5" aria-hidden="true" />
-        </button>
+          classicon="i-carbon-close"
+        />
       </div>
       <!-- Modal body content -->
       <slot />

app/components/Package/Card.vue

···
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
     >
-      <TagButton
+      <ButtonBase
         v-for="keyword in result.package.keywords.slice(0, 5)"
         class="pointer-events-auto"
+        size="small"
         :key="keyword"
-        :pressed="props.filters?.keywords.includes(keyword)"
+        :aria-pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"
         :data-result-index="index"
         @click.stop="emit('clickKeyword', keyword)"
       >
         {{ keyword }}
-      </TagButton>
+      </ButtonBase>
       <span
         v-if="result.package.keywords.length > 5"
         class="text-fg-subtle text-xs pointer-events-auto"

app/components/Package/Dependencies.vue

···
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <NuxtLink
-            :to="packageRoute(dep)"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
-            dir="ltr"
-          >
+          <LinkBase :to="packageRoute(dep)" dir="ltr">
             {{ dep }}
-          </NuxtLink>
+          </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
             <span
               v-if="outdatedDeps[dep]"
···
             >
               <span class="i-carbon:warning-alt w-3 h-3" />
             </span>
-            <NuxtLink
+            <LinkBase
               v-if="getVulnerableDepInfo(dep)"
               :to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"
               class="shrink-0"
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
+              classicon="i-carbon:security"
             >
-              <span class="i-carbon:security w-3 h-3" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
               v-if="getDeprecatedDepInfo(dep)"
               :to="packageRoute(dep, getDeprecatedDepInfo(dep)!.version)"
               class="shrink-0 text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
+              classicon="i-carbon:warning-hex"
             >
-              <span class="i-carbon-warning-hex w-3 h-3" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
               :to="packageRoute(dep, version)"
-              class="font-mono text-xs text-end truncate"
+              class="truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version"
             >
               {{ version }}
-            </NuxtLink>
+            </LinkBase>
             <span v-if="outdatedDeps[dep]" class="sr-only">
               ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
             </span>
···
           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">
-            <NuxtLink
-              :to="packageRoute(peer.name)"
-              class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
-              dir="ltr"
-            >
+            <LinkBase :to="packageRoute(peer.name)" class="truncate" dir="ltr">
               {{ peer.name }}
-            </NuxtLink>
-            <span
-              v-if="peer.optional"
-              class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
-              :title="$t('package.dependencies.optional')"
-            >
+            </LinkBase>
+            <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
               {{ $t('package.dependencies.optional') }}
-            </span>
+            </TagStatic>
           </div>
-          <NuxtLink
+          <LinkBase
             :to="packageRoute(peer.name, peer.version)"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] truncate"
+            class="truncate"
             :title="peer.version"
             dir="ltr"
           >
             {{ peer.version }}
-          </NuxtLink>
+          </LinkBase>
         </li>
       </ul>
       <button
···
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <NuxtLink
-            :to="packageRoute(dep)"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
-            dir="ltr"
-          >
+          <LinkBase :to="packageRoute(dep)" class="truncate" dir="ltr">
             {{ dep }}
-          </NuxtLink>
-          <NuxtLink
-            :to="packageRoute(dep, version)"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
-            :title="version"
-            dir="ltr"
-          >
+          </LinkBase>
+          <LinkBase :to="packageRoute(dep, version)" class="truncate" :title="version" dir="ltr">
             {{ version }}
-          </NuxtLink>
+          </LinkBase>
         </li>
       </ul>
       <button
         v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
+        class="mt-2 truncate"
         @click="optionalDepsExpanded = true"
       >
         {{

app/components/Package/InstallScripts.vue

···
           :key="dep"
           class="flex items-center justify-between py-0.5 text-sm gap-2"
         >
-          <NuxtLink
+          <LinkBase
             :to="packageRoute(dep)"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}
-          </NuxtLink>
+          </LinkBase>
           <span class="flex items-center gap-1">
             <span
               v-if="

app/components/Package/Keywords.vue

···
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
     <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">
-        <TagLink :to="{ name: 'search', query: { q: `keywords:${keyword}` } }">
+        <LinkBase
+          variant="button-secondary"
+          size="small"
+          :to="{ name: 'search', query: { q: `keywords:${keyword}` } }"
+        >
           {{ keyword }}
-        </TagLink>
+        </LinkBase>
       </li>
     </ul>
   </CollapsibleSection>

app/components/Package/Maintainers.vue

···
         class="flex items-center justify-between gap-2"
       >
         <div class="flex items-center gap-2 min-w-0">
-          <NuxtLink
+          <LinkBase
             v-if="maintainer.name"
             :to="{
               name: '~username',
···
             dir="ltr"
           >
             ~{{ maintainer.name }}
-          </NuxtLink>
+          </LinkBase>
           <span v-else class="font-mono text-sm text-fg-muted" dir="ltr">{{
             maintainer.email
           }}</span>
···
         </div>
 
         <!-- Remove button (only when can manage and not self) -->
-        <button
+        <ButtonBase
           v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-accent/70"
+          class="hover:text-red-400"
           :aria-label="
             $t('package.maintainers.remove_owner', {
               name: maintainer.name,
···
           @click="handleRemoveOwner(maintainer.name)"
         >
           <span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
-        </button>
+        </ButtonBase>
       </li>
     </ul>
 
     <!-- Show more/less toggle (only when not managing and there are hidden maintainers) -->
-    <button
+    <ButtonBase
       v-if="!canManageOwners && hiddenMaintainersCount > 0"
-      type="button"
-      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
       @click="showAllMaintainers = !showAllMaintainers"
     >
       {{
···
               count: hiddenMaintainersCount,
             })
       }}
-    </button>
+    </ButtonBase>
 
     <!-- Add owner form (only when can manage) -->
     <div v-if="canManageOwners" class="mt-3">
···
             v-bind="noCorrect"
             class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
           />
-          <button
-            type="submit"
-            :disabled="!newOwnerUsername.trim() || isAdding"
-            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
-          >
+          <ButtonBase type="submit" :disabled="!newOwnerUsername.trim() || isAdding">
             {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
-          </button>
-          <button
-            type="button"
-            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
+          </ButtonBase>
+          <ButtonBase
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
-          >
-            <span class="i-carbon-close w-4 h-4" aria-hidden="true" />
-          </button>
+            classicon="i-carbon-close"
+          />
         </form>
       </div>
-      <button
-        v-else
-        type="button"
-        class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
-        @click="showAddOwner = true"
-      >
+      <ButtonBase v-else type="button" @click="showAddOwner = true">
         {{ $t('package.maintainers.add_owner') }}
-      </button>
+      </ButtonBase>
     </div>
   </CollapsibleSection>
 </template>

app/components/Package/MetricsBadges.vue

···
 <script setup lang="ts">
-import { NuxtLink } from '#components'
+import { LinkBase, TagStatic } from '#components'
 
 const props = defineProps<{
   packageName: string
···
     <!-- TypeScript types badge -->
     <li v-if="!props.isBinary" class="contents">
       <TooltipApp :text="typesTooltip">
-        <component
-          :is="typesHref ? NuxtLink : 'span'"
+        <LinkBase
+          v-if="typesHref"
+          variant="button-secondary"
+          size="small"
           :to="typesHref"
-          :tabindex="!typesHref ? 0 : undefined"
-          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
-          :class="[
+          classicon="i-carbon-checkmark"
+        >
+          {{ $t('package.metrics.types_label') }}
+        </LinkBase>
+        <TagStatic
+          v-else
+          :variant="hasTypes && !isLoading ? 'default' : 'ghost'"
+          :tabindex="0"
+          :classicon="
             isLoading
-              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+              ? 'i-carbon-circle-dash motion-safe:animate-spin'
               : hasTypes
-                ? 'text-fg-muted bg-bg-muted border border-border'
-                : 'text-fg-subtle bg-bg-subtle border border-border-subtle',
-            typesHref
-              ? 'hover:text-fg hover:border-border-hover focus-visible:outline-accent/70'
-              : '',
-          ]"
+                ? 'i-carbon-checkmark'
+                : 'i-carbon-close'
+          "
         >
-          <span
-            v-if="isLoading"
-            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
-          <span
-            v-else
-            class="w-3 h-3"
-            :class="hasTypes ? 'i-carbon-checkmark' : 'i-carbon-close'"
-            aria-hidden="true"
-          />
           {{ $t('package.metrics.types_label') }}
-        </component>
+        </TagStatic>
       </TooltipApp>
     </li>
 
···
       <TooltipApp
         :text="isLoading ? '' : hasEsm ? $t('package.metrics.esm') : $t('package.metrics.no_esm')"
       >
-        <span
+        <TagStatic
           tabindex="0"
-          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
-          :class="
+          :variant="hasEsm && !isLoading ? 'default' : 'ghost'"
+          :classicon="
             isLoading
-              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+              ? 'i-carbon-circle-dash motion-safe:animate-spin'
               : hasEsm
-                ? 'text-fg-muted bg-bg-muted border border-border'
-                : 'text-fg-subtle bg-bg-subtle border border-border-subtle'
+                ? 'i-carbon-checkmark'
+                : 'i-carbon-close'
           "
         >
-          <span
-            v-if="isLoading"
-            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
-          <span
-            v-else
-            class="w-3 h-3"
-            :class="hasEsm ? 'i-carbon-checkmark' : 'i-carbon-close'"
-            aria-hidden="true"
-          />
           ESM
-        </span>
+        </TagStatic>
       </TooltipApp>
     </li>
 
     <!-- CJS badge -->
     <li v-if="isLoading || hasCjs" class="contents">
       <TooltipApp :text="isLoading ? '' : $t('package.metrics.cjs')">
-        <span
+        <TagStatic
           tabindex="0"
-          class="flex items-center gap-1 px-1.5 py-0.5 font-mono text-xs rounded transition-colors duration-200 focus-visible:(outline-2 outline-accent)"
-          :class="
-            isLoading
-              ? 'text-fg-subtle bg-bg-subtle border border-border-subtle'
-              : 'text-fg-muted bg-bg-muted border border-border'
+          :variant="isLoading ? 'ghost' : 'default'"
+          :classicon="
+            isLoading ? 'i-carbon-circle-dash motion-safe:animate-spin' : 'i-carbon-checkmark'
           "
         >
-          <span
-            v-if="isLoading"
-            class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
-            aria-hidden="true"
-          />
-          <span v-else class="i-carbon-checkmark w-3 h-3" aria-hidden="true" />
           CJS
-        </span>
+        </TagStatic>
       </TooltipApp>
     </li>
   </ul>

app/components/Package/TableRow.vue

···
         class="flex flex-wrap gap-1 justify-end"
         :aria-label="$t('package.card.keywords')"
       >
-        <TagButton
+        <ButtonBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          :pressed="props.filters?.keywords.includes(keyword)"
+          size="small"
+          :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
           :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
         >
           {{ keyword }}
-        </TagButton>
+        </ButtonBase>
         <span
           v-if="pkg.keywords.length > 3"
           class="text-fg-subtle text-xs"

app/components/Package/Versions.vue

···
     id="versions"
   >
     <template #actions>
-      <a
-        :href="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
+      <LinkBase
+        variant="button-secondary"
+        :to="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
         :title="$t('package.downloads.community_distribution')"
+        classicon="i-carbon:load-balancer-network"
       >
-        <span class="i-carbon:load-balancer-network w-3.5 h-3.5" aria-hidden="true" />
         <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
-      </a>
+      </LinkBase>
     </template>
     <div class="space-y-0.5 min-w-0">
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
···
           <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
             <div class="overflow-hidden">
               <div>
-                <NuxtLink
+                <LinkBase
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent"
+                  class="text-sm"
                   :class="
-                    row.primaryVersion.deprecated
-                      ? 'text-red-400 hover:text-red-300'
-                      : 'text-fg-muted hover:text-fg'
+                    row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                   "
                   :title="
                     row.primaryVersion.deprecated
···
                         })
                       : row.primaryVersion.version
                   "
+                  :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
                 >
-                  <span
-                    v-if="row.primaryVersion.deprecated"
-                    class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
-                    aria-hidden="true"
-                  />
                   <span dir="ltr">
                     {{ row.primaryVersion.version }}
                   </span>
-                </NuxtLink>
+                </LinkBase>
               </div>
               <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
                 <span
···
         >
           <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
             <div class="flex items-center justify-between gap-2">
-              <NuxtLink
+              <LinkBase
                 :to="versionRoute(v.version)"
-                class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
-                :class="
-                  v.deprecated
-                    ? 'text-red-400 hover:text-red-300'
-                    : 'text-fg-subtle hover:text-fg-muted'
-                "
+                class="text-xs truncate"
+                :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
                   v.deprecated
                     ? $t('package.versions.deprecated_title', { version: v.version })
                     : v.version
                 "
+                :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
               >
-                <span
-                  v-if="v.deprecated"
-                  class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                  aria-hidden="true"
-                />
                 <span dir="ltr">
                   {{ v.version }}
                 </span>
-              </NuxtLink>
+              </LinkBase>
               <div class="flex items-center gap-2 shrink-0">
                 <DateTime
                   v-if="v.time"
···
           <!-- Hidden tag rows (overflow from visible tags) -->
           <div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
             <div class="flex items-center justify-between gap-2">
-              <NuxtLink
+              <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                class="text-xs truncate"
                 :class="
-                  row.primaryVersion.deprecated
-                    ? 'text-red-400 hover:text-red-300'
-                    : 'text-fg-muted hover:text-fg'
+                  row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
                 :title="
                   row.primaryVersion.deprecated
···
                       })
                     : row.primaryVersion.version
                 "
+                :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
               >
-                <span
-                  v-if="row.primaryVersion.deprecated"
-                  class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                  aria-hidden="true"
-                />
                 <span dir="ltr">
                   {{ row.primaryVersion.version }}
                 </span>
-              </NuxtLink>
+              </LinkBase>
               <div class="flex items-center gap-2 shrink-0 pe-2">
                 <DateTime
                   v-if="row.primaryVersion.time"
···
                         aria-hidden="true"
                       />
                     </button>
-                    <NuxtLink
+                    <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="text-xs truncate"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-muted hover:text-fg'
+                          : undefined
                       "
                       :title="
                         group.versions[0]?.deprecated
···
                             })
                           : group.versions[0]?.version
                       "
+                      :classicon="
+                        group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
+                      "
                     >
-                      <span
-                        v-if="group.versions[0]?.deprecated"
-                        class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                        aria-hidden="true"
-                      />
                       <span dir="ltr">
                         {{ group.versions[0]?.version }}
                       </span>
-                    </NuxtLink>
+                    </LinkBase>
                   </div>
                   <div class="flex items-center gap-2 shrink-0 pe-2">
                     <DateTime
···
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2 min-w-0">
                     <span class="w-4 shrink-0" />
-                    <NuxtLink
+                    <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="text-xs truncate"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-muted hover:text-fg'
+                          : undefined
                       "
                       :title="
                         group.versions[0]?.deprecated
···
                             })
                           : group.versions[0]?.version
                       "
+                      :classicon="
+                        group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
+                      "
                     >
-                      <span
-                        v-if="group.versions[0]?.deprecated"
-                        class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                        aria-hidden="true"
-                      />
                       <span dir="ltr">
                         {{ group.versions[0]?.version }}
                       </span>
-                    </NuxtLink>
+                    </LinkBase>
                   </div>
                   <div class="flex items-center gap-2 shrink-0 pe-2">
                     <DateTime
···
               >
                 <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
                   <div class="flex items-center justify-between gap-2">
-                    <NuxtLink
+                    <LinkBase
                       :to="versionRoute(v.version)"
-                      class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
-                      :class="
-                        v.deprecated
-                          ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-subtle hover:text-fg-muted'
-                      "
+                      class="text-xs truncate"
+                      :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="
                         v.deprecated
                           ? $t('package.versions.deprecated_title', { version: v.version })
                           : v.version
                       "
+                      :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
                     >
-                      <span
-                        v-if="v.deprecated"
-                        class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                        aria-hidden="true"
-                      />
                       <span dir="ltr">
                         {{ v.version }}
                       </span>
-                    </NuxtLink>
+                    </LinkBase>
                     <div class="flex items-center gap-2 shrink-0 pe-2">
                       <DateTime
                         v-if="v.time"

app/components/Package/WeeklyDownloadStats.vue

···
   <div class="space-y-8">
     <CollapsibleSection id="downloads" :title="$t('package.downloads.title')">
       <template #actions>
-        <button
+        <ButtonBase
           type="button"
           @click="openChartModal"
           class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
           :title="$t('package.downloads.analyze')"
+          classicon="i-carbon:data-analytics"
         >
-          <span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />
           <span class="sr-only">{{ $t('package.downloads.analyze') }}</span>
-        </button>
+        </ButtonBase>
       </template>
 
       <div class="w-full overflow-hidden">

app/components/Tag/Button.vue

···
-<script setup lang="ts">
-const props = defineProps<{
-  disabled?: boolean
-  /**
-   * type should never be used, because this will always be a button.
-   *
-   * If you want a link use `TagLink` instead.
-   *  */
-  type?: never
-  pressed?: boolean
-}>()
-</script>
-
-<template>
-  <button
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border border-solid rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-    :class="[
-      pressed
-        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50 bg-fg-muted)'
-        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
-      {
-        'opacity-50 cursor-not-allowed': disabled,
-      },
-    ]"
-    type="button"
-    :disabled="disabled ? true : undefined"
-    :aria-pressed="pressed"
-  >
-    <slot />
-  </button>
-</template>

app/components/Tag/Link.vue

···
-<script setup lang="ts">
-import type { NuxtLinkProps } from '#app'
-
-const { current, ...props } = defineProps<
-  {
-    /** Disabled links will be displayed as plain text */
-    disabled?: boolean
-    /**
-     * `type` should never be used, because this will always be a link.
-     *
-     * If you want a button use `TagButton` instead.
-     * */
-    type?: never
-    current?: boolean
-  } &
-    /** This makes sure the link always has either `to` or `href` */
-    (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
-    NuxtLinkProps
->()
-</script>
-
-<template>
-  <!-- This is only a placeholder implementation yet. It will probably need some additional styling, but note: A disabled link is just text. -->
-  <span v-if="disabled" class="opacity-50"><slot /></span>
-  <NuxtLink
-    v-else
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
-    :class="{
-      'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)': !current,
-      'bg-fg text-bg border-fg hover:(text-text-bg/50)': current,
-      'opacity-50 cursor-not-allowed': disabled,
-    }"
-    v-bind="props"
-  >
-    <slot />
-  </NuxtLink>
-</template>

app/components/Tag/Static.vue

···
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ as?: string | Component }>(), { as: 'span' })
+const props = withDefaults(
+  defineProps<{
+    as?: string | Component
+    variant?: 'ghost' | 'default'
+
+    classicon?: string
+  }>(),
+  { as: 'span', variant: 'default' },
+)
 </script>
 
 <template>
   <component
     :is="as"
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded"
+    class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
+    :class="{ 'opacity-40': variant === 'ghost' }"
   >
+    <span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
     <slot />
   </component>
 </template>

app/pages/about.vue

···
                 <strong class="text-fg">{{ $t('about.what_we_are.better_ux_dx') }}</strong>
               </template>
               <template #jsr>
-                <a
-                  href="https://jsr.io/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="link text-fg"
-                  >JSR</a
-                >
+                <LinkBase to="https://jsr.io/">JSR</LinkBase>
               </template>
             </i18n-t>
           </p>
···
                 >
                   <template #already>{{ $t('about.what_we_are_not.words.already') }}</template>
                   <template #people>
-                    <a
-                      :href="pmLinks.npm"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.people') }}</a
-                    >
+                    <LinkBase :to="pmLinks.npm">{{
+                      $t('about.what_we_are_not.words.people')
+                    }}</LinkBase>
                   </template>
                   <template #building>
-                    <a
-                      :href="pmLinks.pnpm"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.building') }}</a
-                    >
+                    <LinkBase :to="pmLinks.pnpm">{{
+                      $t('about.what_we_are_not.words.building')
+                    }}</LinkBase>
                   </template>
                   <template #really>
-                    <a
-                      :href="pmLinks.yarn"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.really') }}</a
-                    >
+                    <LinkBase :to="pmLinks.yarn">{{
+                      $t('about.what_we_are_not.words.really')
+                    }}</LinkBase>
                   </template>
                   <template #cool>
-                    <a
-                      :href="pmLinks.bun"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.cool') }}</a
-                    >
+                    <LinkBase :to="pmLinks.bun">{{
+                      $t('about.what_we_are_not.words.cool')
+                    }}</LinkBase>
                   </template>
                   <template #package>
-                    <a
-                      :href="pmLinks.deno"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.package') }}</a
-                    >
+                    <LinkBase :to="pmLinks.deno">{{
+                      $t('about.what_we_are_not.words.package')
+                    }}</LinkBase>
                   </template>
                   <template #managers>
-                    <a
-                      :href="pmLinks.vlt"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-fg-muted hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
-                      >{{ $t('about.what_we_are_not.words.managers') }}</a
-                    >
+                    <LinkBase :to="pmLinks.vlt">{{
+                      $t('about.what_we_are_not.words.managers')
+                    }}</LinkBase>
                   </template>
                 </i18n-t>
               </span>

app/pages/index.vue

···
                   @input="handleInput"
                 />
 
-                <button
+                <ButtonBase
                   type="submit"
-                  class="absolute group inset-ie-2.5 px-2.5 sm:ps-4 sm:pe-4 py-2 font-mono text-sm text-bg bg-fg/90 rounded-md transition-[background-color,transform] duration-200 hover:bg-fg! group-focus-within:bg-fg/80 active:scale-95 focus-visible:outline-accent/70"
+                  variant="primary"
+                  class="absolute inset-ie-2"
+                  classicon="i-carbon:search"
                 >
-                  <span
-                    class="inline-block i-carbon:search align-middle w-4 h-4 sm:me-2"
-                    aria-hidden="true"
-                  ></span>
                   <span class="sr-only sm:not-sr-only">
                     {{ $t('search.button') }}
                   </span>
-                </button>
+                </ButtonBase>
               </div>
             </div>
           </form>
···
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
           <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
-            <NuxtLink
-              :to="packageRoute(framework.package)"
-              class="link-subtle font-mono text-sm inline-flex items-center gap-2 group"
-            >
+            <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
               <span
                 class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
               />
               {{ framework.name }}
-            </NuxtLink>
+            </LinkBase>
           </li>
         </ul>
       </nav>

app/pages/org/[org].vue

···
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <NuxtLink :to="{ name: 'index' }" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
+        $t('common.go_back_home')
+      }}</LinkBase>
     </div>
 
     <!-- Empty state -->

app/pages/package-code/[...path].vue

···
     <!-- 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>
-      <NuxtLink :to="packageRoute(packageName)" class="btn">{{
+      <LinkBase variant="button-secondary" :to="packageRoute(packageName)">{{
         $t('code.go_to_package')
-      }}</NuxtLink>
+      }}</LinkBase>
     </div>
 
     <!-- Loading state -->
···
     <!-- 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>
-      <NuxtLink :to="packageRoute(packageName, version)" class="btn">{{
+      <LinkBase variant="button-secondary" :to="packageRoute(packageName, version)">{{
         $t('code.back_to_package')
-      }}</NuxtLink>
+      }}</LinkBase>
     </div>
 
     <!-- Main content: file tree + file viewer -->
···
           <p class="text-fg-subtle text-sm mb-4">
             {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
-          <a
-            :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="btn inline-flex items-center gap-2"
+          <LinkBase
+            variant="button-secondary"
+            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
-            <span class="i-carbon:launch w-4 h-4" />
-          </a>
+          </LinkBase>
         </div>
 
         <!-- Loading file content -->
···
           <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
           <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>
-          <a
-            :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="btn inline-flex items-center gap-2"
+          <LinkBase
+            variant="button-secondary"
+            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
-            <span class="i-carbon:launch w-4 h-4" />
-          </a>
+          </LinkBase>
         </div>
 
         <!-- Directory listing (when no file selected or viewing a directory) -->

app/pages/package/[[org]]/[name].vue

···
 import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
-import { NuxtLink } from '#components'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
+import { LinkBase } from '#components'
 
 defineOgImageComponent('Package', {
   name: () => packageName.value,
···
               :title="pkg.name"
               dir="ltr"
             >
-              <NuxtLink
-                v-if="orgName"
-                :to="{ name: 'org', params: { org: orgName } }"
-                class="text-fg-muted hover:text-fg transition-colors duration-200"
-              >
+              <LinkBase v-if="orgName" :to="{ name: 'org', params: { org: orgName } }">
                 @{{ orgName }}
-              </NuxtLink>
+              </LinkBase>
               <span v-if="orgName">/</span>
               <span :class="{ 'text-fg-muted': orgName }">
                 {{ orgName ? pkg.name.replace(`@${orgName}/`, '') : pkg.name }}
···
               <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
             </template>
 
-            <NuxtLink
+            <LinkBase
               v-if="requestedVersion && resolvedVersion !== requestedVersion"
               :to="packageRoute(pkg.name, resolvedVersion)"
               :title="$t('package.view_permalink')"
               dir="ltr"
-              >{{ resolvedVersion }}</NuxtLink
+              >{{ resolvedVersion }}</LinkBase
             >
             <span dir="ltr" v-else>v{{ resolvedVersion }}</span>
 
···
                 "
                 position="bottom"
               >
-                <a
-                  href="#provenance"
+                <LinkBase
+                  variant="button-secondary"
+                  size="small"
+                  to="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
-                  class="inline-flex items-center justify-center gap-1.5 text-fg-muted hover:text-emerald-500 transition-colors duration-200 min-w-6 min-h-6"
-                >
-                  <span class="i-lucide-shield-check w-3.5 h-3.5 shrink-0" aria-hidden="true" />
-                </a>
+                  classicon="i-lucide-shield-check"
+                />
               </TooltipApp>
             </template>
             <span
···
                   class="i-carbon-circle-dash w-3 h-3 motion-safe:animate-spin"
                   aria-hidden="true"
                 />
-                <button
+                <ButtonBase
                   v-else
                   @click="likeAction"
-                  type="button"
+                  size="small"
                   :title="
                     likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
-                  class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
                   :aria-label="
                     likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
                   "
+                  :aria-pressed="likesData?.userHasLiked"
+                  :classicon="
+                    likesData?.userHasLiked
+                      ? 'i-lucide-heart-minus text-red-500'
+                      : 'i-lucide-heart-plus'
+                  "
                 >
-                  <span
-                    :class="
-                      likesData?.userHasLiked
-                        ? 'i-lucide-heart-minus text-red-500'
-                        : 'i-lucide-heart-plus'
-                    "
-                    class="w-4 h-4"
-                    aria-hidden="true"
-                  />
-                  <span>{{
-                    formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 })
-                  }}</span>
-                </button>
+                  {{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}
+                </ButtonBase>
               </TooltipApp>
               <template #fallback>
                 <div
···
           </div>
 
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
-          <nav
+          <ButtonGroup
             v-if="resolvedVersion"
+            as="nav"
             :aria-label="$t('package.navigation')"
-            class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
+            class="hidden sm:flex"
           >
-            <NuxtLink
+            <LinkBase
+              variant="button-secondary"
               v-if="docsLink"
               :to="docsLink"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
-              aria-keyshortcuts="d"
+              keyshortcut="d"
+              classicon="i-carbon:document"
             >
-              <span class="i-carbon:document w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.docs') }}
-              <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
-                aria-hidden="true"
-              >
-                d
-              </kbd>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
+              variant="button-secondary"
               :to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
-              aria-keyshortcuts="."
+              keyshortcut="."
+              classicon="i-carbon:code"
             >
-              <span class="i-carbon:code w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.code') }}
-              <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
-                aria-hidden="true"
-              >
-                .
-              </kbd>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
+              variant="button-secondary"
               :to="{ name: 'compare', query: { packages: pkg.name } }"
-              class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-transparent text-fg-subtle hover:text-fg hover:bg-bg hover:shadow hover:border-border inline-flex items-center gap-1.5"
-              aria-keyshortcuts="c"
+              keyshortcut="c"
+              classicon="i-carbon:compare"
             >
-              <span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
               {{ $t('package.links.compare') }}
-              <kbd
-                class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
-                aria-hidden="true"
-              >
-                c
-              </kbd>
-            </NuxtLink>
-          </nav>
+            </LinkBase>
+          </ButtonGroup>
         </div>
       </header>
 
···
           </div>
 
           <!-- External links -->
-          <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3">
+          <ul
+            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">
-              <a
-                :href="repositoryUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="w-4 h-4" :class="repoProviderIcon" aria-hidden="true" />
+              <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
                 <span v-if="repoRef">
                   {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
                 </span>
                 <span v-else>{{ $t('package.links.repo') }}</span>
-              </a>
+              </LinkBase>
             </li>
             <li v-if="repositoryUrl && repoMeta && starsLink">
-              <a
-                :href="starsLink"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="w-4 h-4 i-carbon:star" aria-hidden="true" />
+              <LinkBase :to="starsLink" classicon="i-carbon:star">
                 {{ formatCompactNumber(stars, { decimals: 1 }) }}
-              </a>
+              </LinkBase>
             </li>
             <li v-if="forks && forksLink">
-              <a
-                :href="forksLink"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-carbon:fork w-4 h-4" aria-hidden="true" />
+              <LinkBase :to="forksLink" classicon="i-carbon:fork">
                 {{ formatCompactNumber(forks, { decimals: 1 }) }}
-              </a>
+              </LinkBase>
             </li>
             <li v-if="homepageUrl">
-              <a
-                :href="homepageUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-carbon:link w-4 h-4" aria-hidden="true" />
+              <LinkBase :to="homepageUrl" classicon="i-carbon:link">
                 {{ $t('package.links.homepage') }}
-              </a>
+              </LinkBase>
             </li>
             <li v-if="displayVersion?.bugs?.url">
-              <a
-                :href="displayVersion.bugs.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-carbon:warning w-4 h-4" aria-hidden="true" />
+              <LinkBase :to="displayVersion.bugs.url" classicon="i-carbon:warning">
                 {{ $t('package.links.issues') }}
-              </a>
+              </LinkBase>
             </li>
             <li>
-              <a
-                :href="`https://www.npmjs.com/package/${pkg.name}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+              <LinkBase
+                :to="`https://www.npmjs.com/package/${pkg.name}`"
                 :title="$t('common.view_on_npm')"
+                classicon="i-carbon:logo-npm"
               >
-                <span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
                 npm
-              </a>
+              </LinkBase>
             </li>
             <li v-if="jsrInfo?.exists && jsrInfo.url">
-              <a
-                :href="jsrInfo.url"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+              <LinkBase
+                :to="jsrInfo.url"
                 :title="$t('badges.jsr.title')"
+                classicon="i-simple-icons:jsr"
               >
-                <span class="i-simple-icons:jsr w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.jsr') }}
-              </a>
+              </LinkBase>
             </li>
             <li v-if="fundingUrl">
-              <a
-                :href="fundingUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-carbon:favorite w-4 h-4" aria-hidden="true" />
+              <LinkBase :to="fundingUrl" classicon="i-carbon:favorite">
                 {{ $t('package.links.fund') }}
-              </a>
+              </LinkBase>
             </li>
             <!-- Mobile-only: Docs + Code + Compare links -->
             <li v-if="docsLink && displayVersion" class="sm:hidden">
-              <NuxtLink
-                :to="docsLink"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-carbon:document w-4 h-4" aria-hidden="true" />
+              <LinkBase :to="docsLink" classicon="i-carbon:document">
                 {{ $t('package.links.docs') }}
-              </NuxtLink>
+              </LinkBase>
             </li>
             <li v-if="resolvedVersion" class="sm:hidden">
-              <NuxtLink
+              <LinkBase
                 :to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+                classicon="i-carbon:code"
               >
-                <span class="i-carbon:code w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.code') }}
-              </NuxtLink>
+              </LinkBase>
             </li>
             <li class="sm:hidden">
-              <NuxtLink
+              <LinkBase
                 :to="{ name: 'compare', query: { packages: pkg.name } }"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+                classicon="i-carbon:compare"
               >
-                <span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
                 {{ $t('package.links.compare') }}
-              </NuxtLink>
+              </LinkBase>
             </li>
           </ul>
         </div>
···
               {{ $t('package.stats.deps') }}
             </dt>
             <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
-              <!-- Direct deps (muted) -->
-              <span class="text-fg-muted">{{ getDependencyCount(displayVersion) }}</span>
+              <span class="flex items-center gap-1">
+                <!-- Direct deps (muted) -->
+                <span class="text-fg-muted">{{ getDependencyCount(displayVersion) }}</span>
 
-              <!-- Separator and total transitive deps -->
-              <template v-if="getDependencyCount(displayVersion) !== totalDepsCount">
-                <span class="text-fg-subtle mx-1">/</span>
+                <!-- Separator and total transitive deps -->
+                <template v-if="getDependencyCount(displayVersion) !== totalDepsCount">
+                  <span class="text-fg-subtle">/</span>
 
-                <ClientOnly>
-                  <span
-                    v-if="
-                      vulnTreeStatus === 'pending' || (installSizeStatus === 'pending' && !vulnTree)
-                    "
-                    class="inline-flex items-center gap-1 text-fg-subtle"
-                  >
+                  <ClientOnly>
                     <span
-                      class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
-                      aria-hidden="true"
-                    />
-                  </span>
-                  <span v-else-if="totalDepsCount !== null">{{ totalDepsCount }}</span>
-                  <span v-else class="text-fg-subtle">-</span>
-                  <template #fallback>
-                    <span class="text-fg-subtle">-</span>
-                  </template>
-                </ClientOnly>
-              </template>
-
-              <a
-                v-if="getDependencyCount(displayVersion) > 0"
-                :href="`https://npmgraph.js.org/?q=${pkg.name}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
-                :title="$t('package.stats.view_dependency_graph')"
-              >
-                <span class="i-carbon:network-3 w-3.5 h-3.5" aria-hidden="true" />
-                <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
-              </a>
+                      v-if="
+                        vulnTreeStatus === 'pending' ||
+                        (installSizeStatus === 'pending' && !vulnTree)
+                      "
+                      class="inline-flex items-center gap-1 text-fg-subtle"
+                    >
+                      <span
+                        class="i-carbon:circle-dash w-3 h-3 motion-safe:animate-spin"
+                        aria-hidden="true"
+                      />
+                    </span>
+                    <span v-else-if="totalDepsCount !== null">{{ totalDepsCount }}</span>
+                    <span v-else class="text-fg-subtle">-</span>
+                    <template #fallback>
+                      <span class="text-fg-subtle">-</span>
+                    </template>
+                  </ClientOnly>
+                </template>
+              </span>
+              <ButtonGroup v-if="getDependencyCount(displayVersion) > 0">
+                <LinkBase
+                  variant="button-secondary"
+                  size="small"
+                  :to="`https://npmgraph.js.org/?q=${pkg.name}`"
+                  :title="$t('package.stats.view_dependency_graph')"
+                  classicon="i-carbon:network-3"
+                >
+                  <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
+                </LinkBase>
 
-              <a
-                v-if="getDependencyCount(displayVersion) > 0"
-                :href="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
-                :title="$t('package.stats.inspect_dependency_tree')"
-              >
-                <span class="i-lucide-view w-3.5 h-3.5" aria-hidden="true" />
-                <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
-              </a>
+                <LinkBase
+                  variant="button-secondary"
+                  size="small"
+                  :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+                  :title="$t('package.stats.inspect_dependency_tree')"
+                  classicon="i-carbon:tree-view"
+                >
+                  <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
+                </LinkBase>
+              </ButtonGroup>
             </dd>
           </div>
 
···
             id="get-started-heading"
             class="group text-xs text-fg-subtle uppercase tracking-wider"
           >
-            <a
-              href="#get-started"
-              class="inline-flex items-center gap-1.5 py-1 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
-            >
+            <LinkBase to="#get-started">
               {{ $t('package.get_started.title') }}
-              <span
-                class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                aria-hidden="true"
-              />
-            </a>
+            </LinkBase>
           </h2>
           <!-- Package manager dropdown -->
           <PackageManagerSelect />
···
       <section id="readme" class="area-readme min-w-0 scroll-mt-20">
         <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">
-            <a
-              href="#readme"
-              class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline mt-1"
-            >
+            <LinkBase to="#readme">
               {{ $t('package.readme.title') }}
-              <span
-                class="i-carbon:link w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                aria-hidden="true"
-              />
-            </a>
+            </LinkBase>
           </h2>
           <ClientOnly>
-            <div class="flex items-center gap-2">
+            <div class="flex gap-2">
               <!-- Copy readme as Markdown button -->
               <TooltipApp
                 v-if="readmeData?.md"
                 :text="$t('package.readme.copy_as_markdown')"
                 position="bottom"
               >
-                <button
-                  type="button"
+                <ButtonBase
                   @click="copyReadme()"
-                  class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 inline-flex items-center gap-1.5"
-                  :class="
-                    copiedReadme ? 'text-accent bg-accent/10' : 'text-fg-subtle bg-bg hover:text-fg'
-                  "
+                  :aria-pressed="copiedReadme"
                   :aria-label="
                     copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
                   "
+                  :classicon="copiedReadme ? 'i-carbon:checkmark' : 'i-simple-icons:markdown'"
                 >
-                  <span
-                    :class="copiedReadme ? 'i-carbon:checkmark' : 'i-simple-icons:markdown'"
-                    class="size-3"
-                    aria-hidden="true"
-                  />
                   {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
-                </button>
+                </ButtonBase>
               </TooltipApp>
               <ReadmeTocDropdown
                 v-if="readmeData?.toc && readmeData.toc.length > 1"
···
       <div class="area-sidebar">
         <!-- Sidebar -->
         <div
-          class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)])"
+          class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)]) pt-1"
         >
           <!-- Team access controls (for scoped packages when connected) -->
           <ClientOnly>
···
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <NuxtLink :to="{ name: 'index' }" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
+        $t('common.go_back_home')
+      }}</LinkBase>
     </div>
   </main>
 </template>

app/pages/~[username]/index.vue

···
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <NuxtLink :to="{ name: 'index' }" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
+        $t('common.go_back_home')
+      }}</LinkBase>
     </div>
 
     <!-- Package list -->

app/pages/~[username]/orgs.vue

···
   }
 }
 
+error.value = $t('header.orgs_dropdown.error')
+
 // Load on mount and when connection status changes
 watch(isOwnProfile, loadOrgs, { immediate: true })
 
···
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
-        <NuxtLink
+        <LinkBase
+          variant="button-secondary"
           :to="{ name: '~username-orgs', params: { username: npmUser! } }"
-          class="btn mt-4"
-          >{{ $t('user.orgs_page.view_your_orgs') }}</NuxtLink
+          class="mt-4"
+          >{{ $t('user.orgs_page.view_your_orgs') }}</LinkBase
         >
       </div>
 
···
       <!-- Error state -->
       <div v-else-if="error" role="alert" class="py-12 text-center">
         <p class="text-fg-muted mb-4">{{ error }}</p>
-        <button type="button" class="btn" @click="loadOrgs">{{ $t('common.try_again') }}</button>
+        <ButtonBase @click="loadOrgs">{{ $t('common.try_again') }}</ButtonBase>
       </div>
 
       <!-- Empty state -->

test/nuxt/a11y.spec.ts

···
   AppLogo,
   BaseCard,
   BuildEnvironment,
+  ButtonBase,
+  LinkBase,
   CallToAction,
   CodeDirectoryListing,
   CodeFileTree,
···
   SettingsBgThemePicker,
   SettingsToggle,
   TagStatic,
-  TagButton,
-  TagLink,
   TagRadioButton,
   TerminalExecute,
   TerminalInstall,
···
     })
   })
 
-  describe('TagButton', () => {
+  describe('ButtonBase', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(TagButton, {
-        slots: { default: 'Tag content' },
+      const component = await mountSuspended(ButtonBase, {
+        slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations when pressed', async () => {
-      const component = await mountSuspended(TagButton, {
-        props: { pressed: true },
-        slots: { default: 'Tag content' },
+    it('should have no accessibility violations for disabled state', async () => {
+      const component = await mountSuspended(ButtonBase, {
+        props: { disabled: true },
+        slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
-    it('should have no accessibility violations for disabled state', async () => {
-      const component = await mountSuspended(TagButton, {
-        props: { disabled: true },
-        slots: { default: 'Tag content' },
+    it('should have no accessibility violations as primary button', async () => {
+      const component = await mountSuspended(ButtonBase, {
+        props: { variant: 'primary' },
+        slots: { default: 'Button content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with size small', async () => {
+      const component = await mountSuspended(ButtonBase, {
+        props: { size: 'small' },
+        slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
   })
 
-  describe('TagLink', () => {
+  describe('LinkBase', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(TagLink, {
-        props: { href: 'http://example.com' },
-        slots: { default: 'Tag content' },
+      const component = await mountSuspended(LinkBase, {
+        props: { to: 'http://example.com' },
+        slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
     it("should have no accessibility violations when it's the current link", async () => {
-      const component = await mountSuspended(TagLink, {
-        props: { href: 'http://example.com', current: true },
-        slots: { default: 'Tag content' },
+      const component = await mountSuspended(LinkBase, {
+        props: { to: 'http://example.com', current: true },
+        slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
 
     it('should have no accessibility violations when disabled (plain text)', async () => {
-      const component = await mountSuspended(TagLink, {
-        props: { href: 'http://example.com', disabled: true },
-        slots: { default: 'Tag content' },
+      const component = await mountSuspended(LinkBase, {
+        props: { to: 'http://example.com', disabled: true },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations as secondary button', async () => {
+      const component = await mountSuspended(LinkBase, {
+        props: { to: 'http://example.com', disabled: true, variant: 'button-secondary' },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations as primary button', async () => {
+      const component = await mountSuspended(LinkBase, {
+        props: { to: 'http://example.com', disabled: true, variant: 'button-primary' },
+        slots: { default: 'Button link content' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations as small button', async () => {
+      const component = await mountSuspended(LinkBase, {
+        props: {
+          to: 'http://example.com',
+          disabled: true,
+          variant: 'button-secondary',
+          size: 'small',
+        },
+        slots: { default: 'Button link content' },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])

test/unit/a11y-component-coverage.spec.ts

···
   'UserCombobox.vue': 'Unused component - intended for future admin features',
   'SkeletonBlock.vue': 'Already covered indirectly via other component tests',
   'SkeletonInline.vue': 'Already covered indirectly via other component tests',
+  'Button/Group.vue': "Wrapper component, tests wouldn't make much sense here",
 }
 
 /**

uno.config.ts

···
     // Focus states - subtle but accessible
     ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/50 ring-offset-2)'],
 
-    // Buttons
-    [
-      'btn',
-      'inline-flex items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md bg-transparent text-fg transition-all duration-200 hover:(bg-fg hover:text-bg border-fg) focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)',
-    ],
-    [
-      'btn-ghost',
-      'inline-flex items-center justify-center px-3 py-1.5 font-mono text-sm text-fg-muted bg-transparent transition-all duration-200 hover:text-fg focus-ring',
-    ],
-
-    // Links
-    [
-      'link',
-      'text-fg underline-offset-4 decoration-border hover:(decoration-fg underline) transition-colors duration-200 focus-ring',
-    ],
     ['link-subtle', 'text-fg-muted hover:text-fg transition-colors duration-200 focus-ring'],
 
     // badges