diff --git a/frontend/shared/constants/banners.ts b/frontend/shared/constants/banners.ts
index 53aa2a63b2c..f78982de632 100644
--- a/frontend/shared/constants/banners.ts
+++ b/frontend/shared/constants/banners.ts
@@ -1,2 +1,5 @@
 export const bannerNature = ["info", "success", "warning", "error"] as const
 export type BannerNature = (typeof bannerNature)[number]
+
+export const bannerVariant = ["regular", "dark"] as const
+export type BannerVariant = (typeof bannerVariant)[number]
diff --git a/frontend/src/components/VBanner/VNotificationBanner.vue b/frontend/src/components/VBanner/VNotificationBanner.vue
index 390d7f394ed..d70616dd157 100644
--- a/frontend/src/components/VBanner/VNotificationBanner.vue
+++ b/frontend/src/components/VBanner/VNotificationBanner.vue
@@ -5,7 +5,7 @@
  */
 import { computed } from "vue"
 
-import { BannerNature } from "#shared/constants/banners"
+import type { BannerNature, BannerVariant } from "#shared/constants/banners"
 import type { BannerId } from "#shared/types/banners"
 
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -22,7 +22,7 @@ const props = withDefaults(
      * the color variant of the banner; The dark variant is intended for use on
      * bg-complementary pages.
      */
-    variant?: "regular" | "dark"
+    variant?: BannerVariant
     /**
      * the unique ID of the banner
      */
diff --git a/frontend/src/components/VBanner/meta/VNotificationBanner.stories.ts b/frontend/src/components/VBanner/meta/VNotificationBanner.stories.js
similarity index 59%
rename from frontend/src/components/VBanner/meta/VNotificationBanner.stories.ts
rename to frontend/src/components/VBanner/meta/VNotificationBanner.stories.js
index 5770fe23df4..ffd986f7a8c 100644
--- a/frontend/src/components/VBanner/meta/VNotificationBanner.stories.ts
+++ b/frontend/src/components/VBanner/meta/VNotificationBanner.stories.js
@@ -4,36 +4,37 @@ import { bannerNature } from "#shared/constants/banners"
 
 import VNotificationBanner from "~/components/VBanner/VNotificationBanner.vue"
 
-import type { StoryObj } from "@storybook/vue3"
-
 const meta = {
   title: "Components/VNotificationBanner",
   component: VNotificationBanner,
 
   argTypes: {
-    nature: { control: "select", options: [...bannerNature] },
-    variant: { control: "select", options: ["regular", "dark"] },
+    sNature: { control: "select", options: [...bannerNature] },
+    sVariant: { control: "select", options: ["regular", "dark"] },
     onClose: { action: "close" },
   },
   args: {
-    nature: "info",
-    variant: "regular",
+    sNature: "info",
+    sVariant: "regular",
     id: "banner",
   },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
-type StoryTemplate = Omit<Story, "args">
 
 const text =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec justo eget felis facilisis fermentum."
 
-const Template: StoryTemplate = {
+const Template = {
   render: (args) => ({
     components: { VNotificationBanner },
     setup() {
-      return () => h(VNotificationBanner, { ...args }, { default: () => text })
+      return () =>
+        h(
+          VNotificationBanner,
+          { ...args, variant: args.sVariant, nature: args.sNature },
+          { default: () => text }
+        )
     },
   }),
 }
@@ -42,8 +43,8 @@ export const Default = {
   name: "Default",
 
   args: {
-    nature: "success",
-    variant: "regular",
+    sNature: "success",
+    sVariant: "regular",
   },
 }
 
@@ -52,7 +53,7 @@ export const Dark = {
   name: "Dark",
 
   args: {
-    nature: "info",
-    variant: "dark",
+    sNature: "info",
+    sVariant: "dark",
   },
 }
diff --git a/frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js b/frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js
index d28531133fd..37e33a9b49d 100644
--- a/frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js
+++ b/frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js
@@ -14,13 +14,13 @@ const meta = {
   },
 
   argTypes: {
-    size: { options: ["small", "medium"], control: { type: "select" } },
+    sSize: { options: ["small", "medium"], control: { type: "select" } },
 
     useLinks: { control: { type: "boolean" } },
   },
 
   args: {
-    size: "medium",
+    sSize: "medium",
     useLinks: false,
     additionalTypes: false,
   },
@@ -36,10 +36,10 @@ export const Default = {
         h(
           "div",
           {
-            style: args.size === "small" ? "width: max-content;" : "",
+            style: args.sSize === "small" ? "width: max-content;" : "",
             class: "wrapper p-2",
           },
-          [h(VSearchTypes, args)]
+          [h(VSearchTypes, { ...args, size: args.sSize })]
         )
     },
   }),
diff --git a/frontend/src/components/VImageResult/meta/VImageResult.stories.ts b/frontend/src/components/VImageResult/meta/VImageResult.stories.js
similarity index 72%
rename from frontend/src/components/VImageResult/meta/VImageResult.stories.ts
rename to frontend/src/components/VImageResult/meta/VImageResult.stories.js
index 3cce2e82907..6c320d036f0 100644
--- a/frontend/src/components/VImageResult/meta/VImageResult.stories.ts
+++ b/frontend/src/components/VImageResult/meta/VImageResult.stories.js
@@ -4,23 +4,21 @@ import { image } from "~~/test/unit/fixtures/image"
 
 import VImageResult from "~/components/VImageResult/VImageResult.vue"
 
-import type { Meta, StoryObj } from "@storybook/vue3"
-
 const meta = {
   title: "Components/VImageResult",
   component: VImageResult,
-} satisfies Meta<typeof VImageResult>
-
+}
 export default meta
-type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default = {
   render: (args) => ({
     components: { VImageResult },
     setup() {
       return () =>
         h("div", { class: "p-4 image-wrapper max-w-80" }, [
-          h("ol", { class: "flex flex-wrap gap-4" }, [h(VImageResult, args)]),
+          h("ol", { class: "flex flex-wrap gap-4" }, [
+            h(VImageResult, { ...args, aspectRatio: args.sAspectRatio }),
+          ]),
         ])
     },
   }),
@@ -31,7 +29,7 @@ export const Default: Story = {
   },
 
   argTypes: {
-    aspectRatio: {
+    sAspectRatio: {
       options: ["square", "intrinsic"],
       control: { type: "select" },
     },
@@ -39,7 +37,7 @@ export const Default: Story = {
   },
 
   args: {
-    aspectRatio: "intrinsic",
+    sAspectRatio: "intrinsic",
     kind: "search",
     searchTerm: "test",
     relatedTo: "fake-uuid",
diff --git a/frontend/src/components/meta/VButton.stories.js b/frontend/src/components/meta/VButton.stories.js
index e850a47d89c..cb6e67a913b 100644
--- a/frontend/src/components/meta/VButton.stories.js
+++ b/frontend/src/components/meta/VButton.stories.js
@@ -23,23 +23,19 @@ export default {
     },
   },
   args: {
-    size: "medium",
+    sSize: "medium",
   },
   argTypes: {
     as: { options: buttonForms, control: { type: "radio" } },
-
-    variant: { options: buttonVariants, control: { type: "select" } },
-
+    // Use the name that's different from the prop name to hotfix
+    // the storybook bug when the prop with a custom type is not updated when
+    // the value is set in the URL.
+    sVariant: { options: buttonVariants, control: { type: "select" } },
+    sSize: { options: buttonSizes, control: { type: "select" } },
     pressed: { control: "boolean" },
-
-    size: { options: buttonSizes, control: { type: "select" } },
-
     disabled: { control: "boolean" },
-
     focusableWhenDisabled: { control: "boolean" },
-
     type: { control: "text" },
-
     onClick: { action: "click" },
     onMouseDown: { action: "mousedown" },
     onKeydown: { action: "keydown" },
@@ -51,7 +47,6 @@ export default {
 const Template = (args) => ({
   components: { VButton },
   setup() {
-    const { size, variant, ...rest } = args
     return () =>
       h("div", { class: "flex" }, [
         h(
@@ -60,18 +55,20 @@ const Template = (args) => ({
             id: "wrapper",
             class: [
               "px-4 h-16 flex items-center justify-center",
-              variant.startsWith("transparent") ? "bg-surface" : "bg-default",
+              args.sVariant.startsWith("transparent")
+                ? "bg-surface"
+                : "bg-default",
             ],
           },
           [
             h(
               VButton,
               {
-                size,
-                variant,
                 class: "description-bold",
                 href: "/",
-                ...rest,
+                ...args,
+                variant: args.sVariant,
+                size: args.sSize,
               },
               () => "Code is Poetry"
             ),
@@ -88,19 +85,27 @@ const TemplateWithIcons = (args) => ({
       h("div", { class: "flex flex-col items-center gap-4 flex-wrap" }, [
         h(
           VButton,
-          { variant: args.variant, size: args.size, "has-icon-start": true },
+          {
+            variant: args.sVariant,
+            size: args.sSize,
+            "has-icon-start": true,
+          },
           () => [h(VIcon, { name: "replay" }), "Button"]
         ),
         h(
           VButton,
-          { variant: args.variant, size: args.size, "has-icon-end": true },
+          {
+            variant: args.sVariant,
+            size: args.sSize,
+            "has-icon-end": true,
+          },
           () => ["Button", h(VIcon, { name: "external-link" })]
         ),
         h(
           VButton,
           {
-            variant: args.variant,
-            size: args.size,
+            variant: args.sVariant,
+            size: args.sSize,
             "has-icon-start": true,
             "has-icon-end": true,
           },
@@ -130,6 +135,7 @@ const VariantsTemplate = (args) => ({
               key: variant,
               class: "description-bold",
               ...buttonArgs,
+              size: buttonArgs.sSize,
             },
             () => capitalCase(variant)
           )
@@ -143,7 +149,7 @@ export const Default = {
   name: "VButton",
 
   args: {
-    variant: "filled-pink-8",
+    sVariant: "filled-pink-8",
   },
 }
 
@@ -175,16 +181,13 @@ export const Icons = {
   name: "icons",
 
   args: {
-    variant: "bordered-dark",
+    sVariant: "bordered-dark",
   },
 
   argTypes: {
     pressed: { control: "boolean" },
-
-    size: { options: buttonSizes, control: { type: "radio" } },
-
-    variant: { options: buttonVariants },
-
+    sSize: { options: buttonSizes, control: { type: "radio" } },
+    sVariant: { options: buttonVariants },
     disabled: { control: "boolean" },
   },
 }
diff --git a/frontend/test/storybook/visual-regression/v-button.spec.ts b/frontend/test/storybook/visual-regression/v-button.spec.ts
index f60e817384c..a213e792c6c 100644
--- a/frontend/test/storybook/visual-regression/v-button.spec.ts
+++ b/frontend/test/storybook/visual-regression/v-button.spec.ts
@@ -16,7 +16,7 @@ test.describe("VButton", () => {
   )
   for (const variant of nonPressedVariants) {
     test(`${variant} resting`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await expectSnapshot(
         page,
         `${variant}-resting`,
@@ -25,7 +25,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} hovered`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.hover(buttonLocator)
       await expectSnapshot(
         page,
@@ -35,7 +35,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} focused`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.focus(buttonLocator)
       await expectSnapshot(
         page,
@@ -45,7 +45,7 @@ test.describe("VButton", () => {
     })
 
     test(`${variant} focused hovered`, async ({ page }) => {
-      await gotoWithArgs(page, { variant })
+      await gotoWithArgs(page, { sVariant: variant })
       await page.focus(buttonLocator)
       await page.hover(buttonLocator)
       await expectSnapshot(
diff --git a/frontend/test/storybook/visual-regression/v-image-result.spec.ts b/frontend/test/storybook/visual-regression/v-image-result.spec.ts
index 607e0c07657..782755882b9 100644
--- a/frontend/test/storybook/visual-regression/v-image-result.spec.ts
+++ b/frontend/test/storybook/visual-regression/v-image-result.spec.ts
@@ -25,7 +25,7 @@ test.describe("VImageResult", () => {
       })
 
       test(`${ratio} loaded`, async ({ page }) => {
-        await page.goto(urlWithArgs({ aspectRatio: ratio }))
+        await page.goto(urlWithArgs({ sAspectRatio: ratio }))
         await expectSnapshot(
           page,
           `v-image-result-${ratio}-loaded`,
@@ -34,7 +34,7 @@ test.describe("VImageResult", () => {
       })
 
       test(`${ratio} focused`, async ({ page }) => {
-        await page.goto(urlWithArgs({ aspectRatio: ratio }))
+        await page.goto(urlWithArgs({ sAspectRatio: ratio }))
 
         await page.focus(imageCell)
 
@@ -46,7 +46,7 @@ test.describe("VImageResult", () => {
       })
 
       test(`${ratio} hovered`, async ({ page }) => {
-        await page.goto(urlWithArgs({ aspectRatio: ratio }))
+        await page.goto(urlWithArgs({ sAspectRatio: ratio }))
 
         await page.hover(imageCell)
 
@@ -58,7 +58,7 @@ test.describe("VImageResult", () => {
       })
 
       test(`${ratio} focused hovered`, async ({ page }) => {
-        await page.goto(urlWithArgs({ aspectRatio: ratio }))
+        await page.goto(urlWithArgs({ sAspectRatio: ratio }))
 
         await page.focus(imageCell)
         await page.hover(imageCell)
diff --git a/frontend/test/storybook/visual-regression/v-notitication-banner.spec.ts b/frontend/test/storybook/visual-regression/v-notitication-banner.spec.ts
index 88480b1f502..9bfd5338e19 100644
--- a/frontend/test/storybook/visual-regression/v-notitication-banner.spec.ts
+++ b/frontend/test/storybook/visual-regression/v-notitication-banner.spec.ts
@@ -12,7 +12,7 @@ const pageUrl = (
   nature: (typeof natures)[number],
   variant: (typeof variants)[number]
 ) => {
-  return `${defaultUrl}&args=nature:${nature};variant:${variant}`
+  return `${defaultUrl}&args=sNature:${nature};sVariant:${variant}`
 }
 
 test.describe("VNotificationBanner", () => {
diff --git a/frontend/test/storybook/visual-regression/v-search-types.spec.ts b/frontend/test/storybook/visual-regression/v-search-types.spec.ts
index 667333437ea..6d48fa68e7b 100644
--- a/frontend/test/storybook/visual-regression/v-search-types.spec.ts
+++ b/frontend/test/storybook/visual-regression/v-search-types.spec.ts
@@ -12,7 +12,7 @@ test.describe.configure({ mode: "parallel" })
 test.describe("VSearchTypes", () => {
   breakpoints.describeMd(({ expectSnapshot }) => {
     test.beforeEach(async ({ page }) => {
-      await page.goto(`${defaultUrl}&args=size%3Amedium`)
+      await page.goto(`${defaultUrl}&args=sSize%3Amedium`)
       // Ensure the search types have been hydrated
       await expect(page.getByRole("radio").nth(0)).toBeEnabled()
     })
@@ -45,7 +45,7 @@ test.describe("VSearchTypes", () => {
 
   breakpoints.describeXl(({ expectSnapshot }) => {
     test.beforeEach(async ({ page }) => {
-      await page.goto(`${defaultUrl}&args=size%3Asmall`)
+      await page.goto(`${defaultUrl}&args=sSize%3Asmall`)
       // Ensure the search types have been hydrated
       await expect(page.getByRole("radio").nth(0)).toBeEnabled()
     })