From 00240e253592174d65defa1bafdded43a2e3f555 Mon Sep 17 00:00:00 2001
From: Neko <neko@ayaka.moe>
Date: Thu, 20 Aug 2026 16:59:17 +0800
Subject: [PATCH] fix(stage-layouts): clarify active view controls (#2331)

---
 .../InteractiveArea/Actions/ViewControls.vue      | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue b/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
index 22acd7f4c..db1338fdc 100644
--- a/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
+++ b/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
@@ -2,7 +2,7 @@
 import { defaultControlConfig as threeCtrlConf, supportedControl as threeSupportedControl, useThreeViewControl } from '@proj-airi/stage-ui-three'
 import { defaultControlConfig as l2dCtrlConf, supportedControl as l2dSupportedCtrl, useL2dViewControl } from '@proj-airi/stage-ui/stores/live2d'
 import { useSettingsStageModel } from '@proj-airi/stage-ui/stores/settings/stage-model'
-import { GhostButton } from '@proj-airi/ui'
+import { Button } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
@@ -32,12 +32,17 @@ function handleViewControlsToggle(targetMode: string) {
   <div w-full flex flex-1 items-center self-end justify-end gap-2>
     <Transition name="fade">
       <div v-if="controlEnabled?.enabled.value" w-full flex justify-between gap-2>
-        <GhostButton
-          v-for="control in controlEnabled.supported" :key="control"
-          :active="controlEnabled.mode.value === control" w-full @click="handleViewControlsToggle(control)"
+        <Button
+          v-for="control in controlEnabled.supported"
+          :key="control"
+          :aria-pressed="controlEnabled.mode.value === control"
+          :color="controlEnabled.mode.value === control ? 'primary' : 'neutral'"
+          variant="secondary"
+          block
+          @click="handleViewControlsToggle(control)"
         >
           {{ (controlEnabled.conf as any)[control].buttonText }}
-        </GhostButton>
+        </Button>
       </div>
     </Transition>
     <button