diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
index 88464d6986..1a142b193f 100644
--- a/app/components/Button/Base.vue
+++ b/app/components/Button/Base.vue
@@ -15,8 +15,8 @@ const props = withDefaults(
     type?: 'button' | 'submit'
     /** @default "secondary" */
     variant?: 'primary' | 'secondary'
-    /** @default "medium" */
-    size?: 'small' | 'medium'
+    /** @default "md" */
+    size?: 'sm' | 'md'
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
     /** Forces the button to occupy the entire width of its container. */
@@ -27,7 +27,7 @@ const props = withDefaults(
   {
     type: 'button',
     variant: 'secondary',
-    size: 'medium',
+    size: 'md',
   },
 )
 
@@ -48,8 +48,8 @@ defineExpose({
     :class="{
       'inline-flex': !block,
       'flex': block,
-      'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
+      'text-sm px-4 py-2': size === 'md',
+      'text-xs px-2 py-0.5': size === 'sm',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/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))':
diff --git a/app/components/Button/ButtonBase.stories.ts b/app/components/Button/ButtonBase.stories.ts
index db18a72d63..a8aba1f8f7 100644
--- a/app/components/Button/ButtonBase.stories.ts
+++ b/app/components/Button/ButtonBase.stories.ts
@@ -52,7 +52,7 @@ export const Secondary: Story = {
 
 export const Small: Story = {
   args: {
-    size: 'small',
+    size: 'sm',
   },
   render: args => ({
     components: { ButtonBase },
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
index f8f39aee7e..2474d873b5 100644
--- a/app/components/Compare/FacetSelector.vue
+++ b/app/components/Compare/FacetSelector.vue
@@ -40,7 +40,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :aria-pressed="isCategoryAllSelected(category)"
           :disabled="isCategoryAllSelected(category)"
           @click="selectCategory(category)"
-          size="small"
+          size="sm"
         >
           {{ $t('compare.facets.all') }}
         </ButtonBase>
@@ -52,7 +52,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :aria-pressed="isCategoryNoneSelected(category)"
           :disabled="isCategoryNoneSelected(category)"
           @click="deselectCategory(category)"
-          size="small"
+          size="sm"
         >
           {{ $t('compare.facets.none') }}
         </ButtonBase>
@@ -64,7 +64,7 @@ function isCategoryNoneSelected(category: string): boolean {
         <ButtonBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
-          size="small"
+          size="sm"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
index 43e7ec81c7..1d2acf69ca 100644
--- a/app/components/Compare/PackageSelector.vue
+++ b/app/components/Compare/PackageSelector.vue
@@ -213,7 +213,7 @@ onClickOutside(containerRef, () => {
           {{ pkg }}
         </LinkBase>
         <ButtonBase
-          size="small"
+          size="sm"
           :aria-label="
             $t('compare.selector.remove_package', {
               package: pkg === NO_DEPENDENCY_ID ? $t('compare.no_dependency.label') : pkg,
@@ -246,7 +246,6 @@ onClickOutside(containerRef, () => {
               : $t('compare.selector.search_add')
           "
           no-correct
-          size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
           ref="inputRef"
diff --git a/app/components/Compare/ReplacementSuggestion.vue b/app/components/Compare/ReplacementSuggestion.vue
index 169c850ec4..87f3eb6319 100644
--- a/app/components/Compare/ReplacementSuggestion.vue
+++ b/app/components/Compare/ReplacementSuggestion.vue
@@ -65,7 +65,7 @@ const docUrl = computed(() => {
     <!-- No dependency action button -->
     <ButtonBase
       v-if="variant === 'nodep' && showAction !== false"
-      size="small"
+      size="sm"
       :aria-label="$t('compare.no_dependency.add_column')"
       @click="emit('addNoDep')"
     >
@@ -73,7 +73,7 @@ const docUrl = computed(() => {
     </ButtonBase>
 
     <!-- Info link -->
-    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
+    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="sm">
       {{ $t('package.replacement.learn_more') }}
     </LinkBase>
   </div>
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
index 748f921e70..d68ddf5806 100644
--- a/app/components/Filter/Panel.vue
+++ b/app/components/Filter/Panel.vue
@@ -246,7 +246,6 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             :placeholder="searchPlaceholder"
             autocomplete="off"
             class="w-full min-w-25"
-            size="medium"
             no-correct
           />
         </div>
@@ -328,7 +327,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             <ButtonBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              size="small"
+              size="sm"
               :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
index 1a3c42d4e7..1b96d04947 100644
--- a/app/components/Header/AuthModal.client.vue
+++ b/app/components/Header/AuthModal.client.vue
@@ -112,7 +112,6 @@ watch(user, async newUser => {
             :placeholder="$t('auth.modal.handle_placeholder')"
             no-correct
             class="w-full"
-            size="medium"
           />
           <p v-if="errorMessage" class="text-red-500 text-xs mt-1" role="alert">
             {{ errorMessage }}
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
index 3ef85ff2fc..3f10fb22ef 100644
--- a/app/components/Header/ConnectorModal.vue
+++ b/app/components/Header/ConnectorModal.vue
@@ -128,7 +128,6 @@ const executeNpmxConnectorCommand = computed(() => {
             :placeholder="$t('connector.modal.token_placeholder')"
             no-correct
             class="w-full"
-            size="medium"
           />
         </div>
 
@@ -151,7 +150,6 @@ const executeNpmxConnectorCommand = computed(() => {
               inputmode="numeric"
               autocomplete="off"
               class="w-full"
-              size="medium"
             />
 
             <div class="border-t border-border my-3" />
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 9a01ebf9fe..50ddd4f826 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -62,7 +62,7 @@ defineExpose({ focus })
             class="w-full min-w-25 ps-7 pe-8"
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
-            size="small"
+            size="sm"
             ariaKeyshortcuts="/"
           />
           <button
diff --git a/app/components/Input/Base.stories.ts b/app/components/Input/Base.stories.ts
index 5cc765ec6e..55ed81f5c0 100644
--- a/app/components/Input/Base.stories.ts
+++ b/app/components/Input/Base.stories.ts
@@ -8,7 +8,7 @@ const meta = {
     disabled: { control: 'boolean' },
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['sm', 'md', 'lg'],
     },
     noCorrect: {
       control: 'boolean',
@@ -29,10 +29,10 @@ export const Snapshot: Story = {
   render: () => ({
     template: `
       <div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
-          <Component size="small" model-value="Small input" />
-          <Component size="medium" model-value="Medium input" />
-          <Component size="large" model-value="Large input" />
-          <Component size="large" model-value="disabled" disabled />
+          <Component size="sm" model-value="Small input" />
+          <Component size="md" model-value="Medium input" />
+          <Component size="lg" model-value="Large input" />
+          <Component size="lg" model-value="disabled" disabled />
       </div>
     `,
     components: { Component },
diff --git a/app/components/Input/Base.vue b/app/components/Input/Base.vue
index 2154332617..e3f7edccdc 100644
--- a/app/components/Input/Base.vue
+++ b/app/components/Input/Base.vue
@@ -6,8 +6,8 @@ const model = defineModel<string>({ default: '' })
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
-    /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large'
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg'
     /**
      * Prevents the browser from automatically modifying user input
      * (e.g. autocorrect, autocomplete, autocapitalize, and spellcheck).
@@ -18,7 +18,7 @@ const props = withDefaults(
     ariaKeyshortcuts?: string
   }>(),
   {
-    size: 'medium',
+    size: 'md',
     noCorrect: true,
   },
 )
@@ -47,9 +47,9 @@ defineExpose({
     @blur="emit('blur', $event)"
     class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
     :class="{
-      'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'small',
-      'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'medium',
-      'text-base leading-[1.4] px-6 py-4 rounded-xl': size === 'large',
+      'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'sm',
+      'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'md',
+      'text-base leading-[1.4] px-6 py-4 rounded-xl': size === 'lg',
     }"
     :disabled="
       /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
index ba62e47ca8..d24e86ccb8 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
     /** Visual style of the link */
     variant?: 'button-primary' | 'button-secondary' | 'link'
     /** Size (only applicable for button variants) */
-    size?: 'small' | 'medium'
+    size?: 'sm' | 'md'
     /** Makes the link take full width */
     block?: boolean
 
@@ -48,7 +48,7 @@ const props = withDefaults(
      */
     noNewTabIcon?: boolean
   }>(),
-  { variant: 'link', size: 'medium' },
+  { variant: 'link', size: 'md' },
 )
 
 const isLinkExternal = computed(
@@ -64,8 +64,8 @@ const isLinkAnchor = computed(
 /** size is only applicable for button like links */
 const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
-const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
-const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const isButtonSmall = computed(() => props.size === 'sm' && !isLink.value)
+const isButtonMedium = computed(() => props.size === 'md' && !isLink.value)
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
 </script>
 
diff --git a/app/components/Link/Link.stories.ts b/app/components/Link/Link.stories.ts
index 8bf47715b2..3c47db9340 100644
--- a/app/components/Link/Link.stories.ts
+++ b/app/components/Link/Link.stories.ts
@@ -69,7 +69,7 @@ export const ButtonSecondary: Story = {
 export const SmallButton: Story = {
   args: {
     variant: 'button-primary',
-    size: 'small',
+    size: 'sm',
     default: 'Small Button',
   },
 }
@@ -128,16 +128,16 @@ export const Snapshot: Story = {
         <LinkBase to="/" classicon="i-lucide:check">Link with icon</LinkBase>
         <LinkBase to="/" no-underline>Link without underline</LinkBase>
         <LinkBase to="/" disabled>Disabled Link</LinkBase>
-        
+
         <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
           <LinkBase to="/" variant="button-primary">Primary</LinkBase>
           <LinkBase to="/" variant="button-secondary">Secondary</LinkBase>
           <LinkBase to="/" variant="button-primary" disabled>Disabled</LinkBase>
           <LinkBase to="/" variant="button-primary" classicon="i-lucide:copy">With Icon</LinkBase>
         </div>
-        
+
         <div style="display: flex; gap: 1rem;">
-          <LinkBase to="/" variant="button-primary" size="small">Small Button</LinkBase>
+          <LinkBase to="/" variant="button-primary" size="sm">Small Button</LinkBase>
         </div>
         <LinkBase to="/" variant="button-primary" block>Full Width Button</LinkBase>
       </div>
diff --git a/app/components/Org/MembersPanel.vue b/app/components/Org/MembersPanel.vue
index 580f35ec28..4eb3aa136d 100644
--- a/app/components/Org/MembersPanel.vue
+++ b/app/components/Org/MembersPanel.vue
@@ -339,7 +339,7 @@ watch(lastExecutionTime, () => {
           :placeholder="$t('org.members.filter_placeholder')"
           no-correct
           class="w-full min-w-25 ps-7"
-          size="small"
+          size="sm"
         />
       </div>
       <div
@@ -526,7 +526,7 @@ watch(lastExecutionTime, () => {
             :placeholder="$t('org.members.username_placeholder')"
             no-correct
             class="w-full min-w-25"
-            size="small"
+            size="sm"
           />
           <div class="flex items-center gap-2">
             <SelectField
diff --git a/app/components/Org/OperationsQueue.vue b/app/components/Org/OperationsQueue.vue
index d39c99aeeb..3d656d5576 100644
--- a/app/components/Org/OperationsQueue.vue
+++ b/app/components/Org/OperationsQueue.vue
@@ -325,7 +325,7 @@ watch(isExecuting, executing => {
             autocomplete="one-time-code"
             spellcheck="false"
             :class="['flex-1 min-w-25', otpError ? 'border-red-500 focus:outline-red-500' : '']"
-            size="small"
+            size="sm"
             @input="otpError = ''"
           />
           <button
diff --git a/app/components/Org/TeamsPanel.vue b/app/components/Org/TeamsPanel.vue
index b0ddf52464..f5b927a5e6 100644
--- a/app/components/Org/TeamsPanel.vue
+++ b/app/components/Org/TeamsPanel.vue
@@ -295,7 +295,6 @@ watch(lastExecutionTime, () => {
           :placeholder="$t('org.teams.filter_placeholder')"
           no-correct
           class="w-full min-w-25 ps-7"
-          size="medium"
         />
       </div>
       <div
@@ -452,7 +451,6 @@ watch(lastExecutionTime, () => {
                 :placeholder="$t('org.teams.username_placeholder')"
                 no-correct
                 class="flex-1 min-w-25"
-                size="medium"
               />
               <button
                 type="submit"
@@ -509,7 +507,6 @@ watch(lastExecutionTime, () => {
               :placeholder="$t('org.teams.team_name_placeholder')"
               no-correct
               class="flex-1 min-w-25 rounded-is-none"
-              size="medium"
             />
           </div>
           <button
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 04c676de39..bdb6441e08 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -162,7 +162,7 @@ const numberFormatter = useNumberFormatter()
       <li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword">
         <ButtonBase
           class="pointer-events-auto"
-          size="small"
+          size="sm"
           :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue
index 2e9997ff4d..91c6ed4297 100644
--- a/app/components/Package/Keywords.vue
+++ b/app/components/Package/Keywords.vue
@@ -11,7 +11,7 @@ const { model } = useGlobalSearch()
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
         <LinkBase
           variant="button-secondary"
-          size="small"
+          size="sm"
           :to="{ name: 'search', query: { q: `keyword:${keyword}` } }"
           @click="model = `keyword:${keyword}`"
         >
diff --git a/app/components/Package/Likes.vue b/app/components/Package/Likes.vue
index 4ea2798e0b..5c7b68089b 100644
--- a/app/components/Package/Likes.vue
+++ b/app/components/Package/Likes.vue
@@ -130,7 +130,7 @@ const likeAction = async () => {
       >
       <ButtonBase
         @click="likeAction"
-        size="medium"
+        size="md"
         :aria-label="
           likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
         "
diff --git a/app/components/Package/ListControls.vue b/app/components/Package/ListControls.vue
index 298bb7d8c0..be3c610c89 100644
--- a/app/components/Package/ListControls.vue
+++ b/app/components/Package/ListControls.vue
@@ -68,7 +68,6 @@ const showFilteredCount = computed(() => {
         :placeholder="placeholder ?? $t('package.list.filter_placeholder')"
         no-correct
         class="w-full min-w-25 ps-10"
-        size="medium"
       />
     </div>
 
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
index 4876ad1f55..d7f8dd5e5c 100644
--- a/app/components/Package/Maintainers.vue
+++ b/app/components/Package/Maintainers.vue
@@ -265,7 +265,7 @@ watch(
             :placeholder="$t('package.maintainers.username_placeholder')"
             no-correct
             class="flex-1 min-w-25 m-1"
-            size="small"
+            size="sm"
           />
           <ButtonBase type="submit" :disabled="!newOwnerUsername.trim() || isAdding">
             {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
index 4c07a29fea..59d5253e2b 100644
--- a/app/components/Package/MetricsBadges.vue
+++ b/app/components/Package/MetricsBadges.vue
@@ -66,7 +66,7 @@ const typesHref = computed(() => {
         <LinkBase
           v-if="typesHref"
           variant="button-secondary"
-          size="small"
+          size="sm"
           :to="typesHref"
           classicon="i-lucide:check"
         >
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 1a105b7e70..0f1433d7f5 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -144,7 +144,7 @@ const compactNumberFormatter = useCompactNumberFormatter()
         <ButtonBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          size="small"
+          size="sm"
           :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index b2237012b5..41ad9e979f 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1657,7 +1657,6 @@ watch(selectedMetric, value => {
                 type="date"
                 :max="DATE_INPUT_MAX"
                 class="w-full min-w-0 bg-transparent"
-                size="medium"
               />
             </div>
           </div>
@@ -1673,7 +1672,6 @@ watch(selectedMetric, value => {
                 type="date"
                 :max="DATE_INPUT_MAX"
                 class="w-full min-w-0 bg-transparent"
-                size="medium"
               />
             </div>
           </div>
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 4d03bd56d7..fd5544db22 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -565,7 +565,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
             autocomplete="off"
             class="flex-1 min-w-0"
             :class="isInvalidRange ? '!border-red-500' : ''"
-            size="small"
+            size="sm"
           />
           <TooltipApp interactive position="top">
             <span
diff --git a/app/components/SearchProviderToggle.client.vue b/app/components/SearchProviderToggle.client.vue
index 276683610e..4a9033dd24 100644
--- a/app/components/SearchProviderToggle.client.vue
+++ b/app/components/SearchProviderToggle.client.vue
@@ -28,7 +28,7 @@ useEventListener('keydown', event => {
       :aria-label="$t('settings.data_source.label')"
       :aria-expanded="isOpen"
       aria-haspopup="true"
-      size="small"
+      size="sm"
       class="border-none w-8 h-8 !px-0 justify-center"
       classicon="i-lucide:settings"
       @click="isOpen = !isOpen"
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 162dc84ec5..f1fbe7fd2f 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -185,7 +185,7 @@ const copyDevInstallCommand = () =>
             >
             <ButtonBase
               type="button"
-              size="small"
+              size="sm"
               class="text-fg-muted bg-bg-subtle/80 border-border opacity-0 group-hover/devinstallcmd:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.get_started.copy_dev_command')"
               @click.stop="copyDevInstallCommand"
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index c67a38371a..db383e0e03 100644
--- a/app/pages/compare.vue
+++ b/app/pages/compare.vue
@@ -217,7 +217,7 @@ useSeoMeta({
             {{ $t('compare.packages.section_facets') }}
           </h2>
           <ButtonBase
-            size="small"
+            size="sm"
             :aria-pressed="isAllSelected"
             :disabled="isAllSelected"
             :aria-label="$t('compare.facets.select_all')"
@@ -227,7 +227,7 @@ useSeoMeta({
           </ButtonBase>
           <span class="text-3xs text-fg-muted/40" aria-hidden="true">/</span>
           <ButtonBase
-            size="small"
+            size="sm"
             :aria-pressed="isNoneSelected"
             :disabled="isNoneSelected"
             :aria-label="$t('compare.facets.deselect_all')"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8b202b864a..7cc3981569 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -86,7 +86,7 @@ defineOgImageComponent('Default', {
                   autofocus
                   :placeholder="$t('search.placeholder')"
                   no-correct
-                  size="large"
+                  size="lg"
                   class="w-full ps-8 pe-24"
                   aria-describedby="instant-search-advisory"
                   @focus="isSearchFocused = true"
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 309e16db74..5161374fad 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -624,7 +624,7 @@ const showSkeleton = shallowRef(false)
                 <ButtonGroup v-if="dependencyCount > 0" class="ms-auto">
                   <LinkBase
                     variant="button-secondary"
-                    size="small"
+                    size="sm"
                     :to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                     :title="$t('package.stats.view_dependency_graph')"
                     classicon="i-lucide:network -rotate-90"
@@ -634,7 +634,7 @@ const showSkeleton = shallowRef(false)
 
                   <LinkBase
                     variant="button-secondary"
-                    size="small"
+                    size="sm"
                     :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
                     :title="$t('package.stats.inspect_dependency_tree')"
                     classicon="i-lucide:table"
diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 8a3b9c5070..d8a317f604 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -203,7 +203,7 @@ const flatItems = computed<FlatItem[]>(() => {
           type="text"
           :placeholder="$t('package.versions.version_filter_placeholder')"
           :aria-label="$t('package.versions.version_filter_label')"
-          size="small"
+          size="sm"
           class="w-36 sm:w-44"
         />
       </div>
diff --git a/app/pages/translation-status.vue b/app/pages/translation-status.vue
index dfe1b076ef..2eb03598d6 100644
--- a/app/pages/translation-status.vue
+++ b/app/pages/translation-status.vue
@@ -186,7 +186,7 @@ ${template}`
                   <h4 class="text-sm font-medium text-fg my-0">
                     {{ $t('translation_status.missing_keys', {}, { locale: localeEntry.lang }) }}
                   </h4>
-                  <ButtonBase type="button" size="small" @click="copyMissingKeys(localeEntry)">
+                  <ButtonBase type="button" size="sm" @click="copyMissingKeys(localeEntry)">
                     {{
                       copied
                         ? $t('common.copied', {}, { locale: localeEntry.lang })
@@ -209,11 +209,7 @@ ${template}`
                   </ul>
                 </div>
                 <div class="mt-4">
-                  <LinkBase
-                    :to="localeEntry.githubEditUrl"
-                    variant="button-secondary"
-                    size="medium"
-                  >
+                  <LinkBase :to="localeEntry.githubEditUrl" variant="button-secondary" size="md">
                     {{ $t('i18n.edit_on_github', {}, { locale: localeEntry.lang }) }}
                   </LinkBase>
                 </div>
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 5e2c97a7d5..d5827c61ee 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -514,7 +514,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations with size small', async () => {
       const component = await mountSuspended(ButtonBase, {
-        props: { size: 'small' },
+        props: { size: 'sm' },
         slots: { default: 'Button content' },
       })
       const results = await runAxe(component)
@@ -574,7 +574,7 @@ describe('component accessibility audits', () => {
           to: 'http://example.com',
           disabled: true,
           variant: 'button-secondary',
-          size: 'small',
+          size: 'sm',
         },
         slots: { default: 'Button link content' },
       })
@@ -2689,7 +2689,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations with size small', async () => {
       const component = await mountSuspended(InputBase, {
-        props: { size: 'small' },
+        props: { size: 'sm' },
         attrs: { 'aria-label': 'Small input' },
       })
       const results = await runAxe(component)
@@ -2698,7 +2698,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations with size large', async () => {
       const component = await mountSuspended(InputBase, {
-        props: { size: 'large' },
+        props: { size: 'lg' },
         attrs: { 'aria-label': 'Large input' },
       })
       const results = await runAxe(component)