Component: The Rest of the PrimeVue buttons (#7649)

## Summary Automated initial change, cleaned up manually. Please check the screenshot changes. Includes a11y updates to icon buttons. Doesn't hit the buttons in Desktop. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2026-03-11 16:10:05 +00:00 · 2025-12-29 15:03:34 -08:00
parent ea96c71818
commit 7b68b19f11
159 changed files with 1330 additions and 1359 deletions
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -7,7 +7,13 @@
    @wheel.stop
  >
    <div class="show-menu relative">
-      <Button class="p-button-rounded p-button-text" @click="toggleMenu">
+      <Button
+        variant="textonly"
+        size="icon"
+        :aria-label="$t('menu.showMenu')"
+        class="rounded-full"
+        @click="toggleMenu"
+      >
        <i class="pi pi-bars text-lg text-white" />
      </Button>

@@ -19,8 +25,13 @@
          <Button
            v-for="category in availableCategories"
            :key="category"
-            class="p-button-text flex w-full items-center justify-start"
-            :class="{ 'bg-smoke-600': activeCategory === category }"
+            variant="textonly"
+            :class="
+              cn(
+                'flex w-full items-center justify-start',
+                activeCategory === category && 'bg-smoke-600'
+              )
+            "
            @click="selectCategory(category)"
          >
            <i :class="getCategoryIcon(category)" />
@@ -72,7 +83,6 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onMounted, onUnmounted, ref } from 'vue'

 import CameraControls from '@/components/load3d/controls/CameraControls.vue'
@@ -80,12 +90,14 @@ import ExportControls from '@/components/load3d/controls/ExportControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type {
  CameraConfig,
  LightConfig,
  ModelConfig,
  SceneConfig
 } from '@/extensions/core/load3d/interfaces'
+import { cn } from '@/utils/tailwindUtil'

 const { isSplatModel = false, isPlyModel = false } = defineProps<{
  isSplatModel?: boolean
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -72,12 +72,10 @@

      <div class="p-4">
        <div class="flex gap-2">
-          <Button
-            icon="pi pi-times"
-            severity="secondary"
-            :label="t('g.cancel')"
-            @click="handleCancel"
-          />
+          <Button variant="secondary" @click="handleCancel">
+            <i class="pi pi-times" />
+            {{ t('g.cancel') }}
+          </Button>
        </div>
      </div>
    </div>
@@ -85,7 +83,6 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'

 import CameraControls from '@/components/load3d/controls/viewer/ViewerCameraControls.vue'
@@ -93,6 +90,7 @@ import ExportControls from '@/components/load3d/controls/viewer/ViewerExportCont
 import LightControls from '@/components/load3d/controls/viewer/ViewerLightControls.vue'
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import { t } from '@/i18n'
--- a/src/components/load3d/controls/AnimationControls.vue
+++ b/src/components/load3d/controls/AnimationControls.vue
@@ -3,7 +3,13 @@
    v-if="animations && animations.length > 0"
    class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center justify-center gap-2 pt-2"
  >
-    <Button class="p-button-rounded p-button-text" @click="togglePlay">
+    <Button
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="$t('g.playPause')"
+      @click="togglePlay"
+    >
      <i
        :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-lg text-white']"
      />
@@ -28,9 +34,10 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Select from 'primevue/select'

+import Button from '@/components/ui/button/Button.vue'
+
 type Animation = { name: string; index: number }

 const animations = defineModel<Animation[]>('animations')
--- a/src/components/load3d/controls/CameraControls.vue
+++ b/src/components/load3d/controls/CameraControls.vue
@@ -1,13 +1,17 @@
 <template>
  <div class="flex flex-col">
-    <Button class="p-button-rounded p-button-text" @click="switchCamera">
-      <i
-        v-tooltip.right="{
-          value: $t('load3d.switchCamera'),
-          showDelay: 300
-        }"
-        :class="['pi', 'pi-camera', 'text-lg text-white']"
-      />
+    <Button
+      v-tooltip.right="{
+        value: $t('load3d.switchCamera'),
+        showDelay: 300
+      }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="$t('load3d.switchCamera')"
+      @click="switchCamera"
+    >
+      <i :class="['pi', 'pi-camera', 'text-lg text-white']" />
    </Button>
    <PopupSlider
      v-if="showFOVButton"
@@ -18,10 +22,10 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed } from 'vue'

 import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { CameraType } from '@/extensions/core/load3d/interfaces'

 const cameraType = defineModel<CameraType>('cameraType')
--- a/src/components/load3d/controls/ExportControls.vue
+++ b/src/components/load3d/controls/ExportControls.vue
@@ -2,16 +2,17 @@
  <div class="flex flex-col">
    <div class="show-export-formats relative">
      <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.exportModel'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.exportModel')"
        @click="toggleExportFormats"
      >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.exportModel'),
-            showDelay: 300
-          }"
-          class="pi pi-download text-lg text-white"
-        />
+        <i class="pi pi-download text-lg text-white" />
      </Button>
      <div
        v-show="showExportFormats"
@@ -21,7 +22,8 @@
          <Button
            v-for="format in exportFormats"
            :key="format.value"
-            class="p-button-text text-white"
+            variant="textonly"
+            class="text-white"
            @click="exportModel(format.value)"
          >
            {{ format.label }}
@@ -33,9 +35,10 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import { onMounted, onUnmounted, ref } from 'vue'

+import Button from '@/components/ui/button/Button.vue'
+
 const emit = defineEmits<{
  (e: 'exportModel', format: string): void
 }>()
@@ -48,17 +51,17 @@ const exportFormats = [
  { label: 'STL', value: 'stl' }
 ]

-const toggleExportFormats = () => {
+function toggleExportFormats() {
  showExportFormats.value = !showExportFormats.value
 }

-const exportModel = (format: string) => {
+function exportModel(format: string) {
  emit('exportModel', format)

  showExportFormats.value = false
 }

-const closeExportFormatsList = (e: MouseEvent) => {
+function closeExportFormatsList(e: MouseEvent) {
  const target = e.target as HTMLElement

  if (!target.closest('.show-export-formats')) {
--- a/src/components/load3d/controls/LightControls.vue
+++ b/src/components/load3d/controls/LightControls.vue
@@ -2,16 +2,17 @@
  <div class="flex flex-col">
    <div v-if="showLightIntensityButton" class="show-light-intensity relative">
      <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.lightIntensity'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.lightIntensity')"
        @click="toggleLightIntensity"
      >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.lightIntensity'),
-            showDelay: 300
-          }"
-          class="pi pi-sun text-lg text-white"
-        />
+        <i class="pi pi-sun text-lg text-white" />
      </Button>
      <div
        v-show="showLightIntensity"
@@ -31,10 +32,10 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref } from 'vue'

+import Button from '@/components/ui/button/Button.vue'
 import type { MaterialMode } from '@/extensions/core/load3d/interfaces'
 import { useSettingStore } from '@/platform/settings/settingStore'

@@ -56,11 +57,11 @@ const lightAdjustmentIncrement = useSettingStore().get(
  'Comfy.Load3D.LightAdjustmentIncrement'
 )

-const toggleLightIntensity = () => {
+function toggleLightIntensity() {
  showLightIntensity.value = !showLightIntensity.value
 }

-const closeLightSlider = (e: MouseEvent) => {
+function closeLightSlider(e: MouseEvent) {
  const target = e.target as HTMLElement

  if (!target.closest('.show-light-intensity')) {
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -1,14 +1,18 @@
 <template>
  <div class="flex flex-col">
    <div class="show-up-direction relative">
-      <Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.upDirection'),
-            showDelay: 300
-          }"
-          class="pi pi-arrow-up text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: t('load3d.upDirection'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.upDirection')"
+        @click="toggleUpDirection"
+      >
+        <i class="pi pi-arrow-up text-lg text-white" />
      </Button>
      <div
        v-show="showUpDirection"
@@ -18,8 +22,10 @@
          <Button
            v-for="direction in upDirections"
            :key="direction"
-            class="p-button-text text-white"
-            :class="{ 'bg-blue-500': upDirection === direction }"
+            variant="textonly"
+            :class="
+              cn('text-white', upDirection === direction && 'bg-blue-500')
+            "
            @click="selectUpDirection(direction)"
          >
            {{ direction.toUpperCase() }}
@@ -30,16 +36,17 @@

    <div v-if="!hideMaterialMode" class="show-material-mode relative">
      <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: t('load3d.materialMode'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.materialMode')"
        @click="toggleMaterialMode"
      >
-        <i
-          v-tooltip.right="{
-            value: t('load3d.materialMode'),
-            showDelay: 300
-          }"
-          class="pi pi-box text-lg text-white"
-        />
+        <i class="pi pi-box text-lg text-white" />
      </Button>
      <div
        v-show="showMaterialMode"
@@ -49,8 +56,13 @@
          <Button
            v-for="mode in materialModes"
            :key="mode"
-            class="p-button-text whitespace-nowrap text-white"
-            :class="{ 'bg-blue-500': materialMode === mode }"
+            variant="textonly"
+            :class="
+              cn(
+                'whitespace-nowrap text-white',
+                materialMode === mode && 'bg-blue-500'
+              )
+            "
            @click="selectMaterialMode(mode)"
          >
            {{ formatMaterialMode(mode) }}
@@ -62,14 +74,15 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onMounted, onUnmounted, ref } from 'vue'

+import Button from '@/components/ui/button/Button.vue'
 import type {
  MaterialMode,
  UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import { cn } from '@/utils/tailwindUtil'

 const { hideMaterialMode = false, isPlyModel = false } = defineProps<{
  hideMaterialMode?: boolean
@@ -108,31 +121,31 @@ const materialModes = computed(() => {
  return modes
 })

-const toggleUpDirection = () => {
+function toggleUpDirection() {
  showUpDirection.value = !showUpDirection.value
  showMaterialMode.value = false
 }

-const selectUpDirection = (direction: UpDirection) => {
+function selectUpDirection(direction: UpDirection) {
  upDirection.value = direction
  showUpDirection.value = false
 }

-const toggleMaterialMode = () => {
+function toggleMaterialMode() {
  showMaterialMode.value = !showMaterialMode.value
  showUpDirection.value = false
 }

-const selectMaterialMode = (mode: MaterialMode) => {
+function selectMaterialMode(mode: MaterialMode) {
  materialMode.value = mode
  showMaterialMode.value = false
 }

-const formatMaterialMode = (mode: MaterialMode) => {
+function formatMaterialMode(mode: MaterialMode) {
  return t(`load3d.materialModes.${mode}`)
 }

-const closeSceneSlider = (e: MouseEvent) => {
+function closeSceneSlider(e: MouseEvent) {
  const target = e.target as HTMLElement

  if (!target.closest('.show-up-direction')) {
--- a/src/components/load3d/controls/PopupSlider.vue
+++ b/src/components/load3d/controls/PopupSlider.vue
@@ -1,10 +1,14 @@
 <template>
  <div class="relative show-slider">
-    <Button class="p-button-rounded p-button-text" @click="toggleSlider">
-      <i
-        v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
-        :class="['pi', icon, 'text-lg text-white']"
-      />
+    <Button
+      v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="tooltipText"
+      @click="toggleSlider"
+    >
+      <i :class="['pi', icon, 'text-lg text-white']" />
    </Button>
    <div
      v-show="showSlider"
@@ -22,10 +26,11 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { onMounted, onUnmounted, ref } from 'vue'

+import Button from '@/components/ui/button/Button.vue'
+
 const {
  icon = 'pi-expand',
  min = 10,
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -2,20 +2,26 @@
  <div class="relative rounded-lg bg-smoke-700/30">
    <div class="flex flex-col gap-2">
      <Button
-        class="p-button-rounded p-button-text"
-        :class="{
-          'p-button-danger': isRecording,
-          'recording-button-blink': isRecording
+        v-tooltip.right="{
+          value: isRecording
+            ? $t('load3d.stopRecording')
+            : $t('load3d.startRecording'),
+          showDelay: 300
        }"
+        size="icon"
+        variant="textonly"
+        :class="
+          cn(
+            'rounded-full',
+            isRecording && 'text-red-500 recording-button-blink'
+          )
+        "
+        :aria-label="
+          isRecording ? $t('load3d.stopRecording') : $t('load3d.startRecording')
+        "
        @click="toggleRecording"
      >
        <i
-          v-tooltip.right="{
-            value: isRecording
-              ? $t('load3d.stopRecording')
-              : $t('load3d.startRecording'),
-            showDelay: 300
-          }"
          :class="[
            'pi',
            isRecording ? 'pi-circle-fill' : 'pi-video',
@@ -26,30 +32,32 @@

      <Button
        v-if="hasRecording && !isRecording"
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.exportRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.exportRecording')"
        @click="handleExportRecording"
      >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.exportRecording'),
-            showDelay: 300
-          }"
-          class="pi pi-download text-lg text-white"
-        />
+        <i class="pi pi-download text-lg text-white" />
      </Button>

      <Button
        v-if="hasRecording && !isRecording"
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.clearRecording'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="$t('load3d.clearRecording')"
        @click="handleClearRecording"
      >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.clearRecording'),
-            showDelay: 300
-          }"
-          class="pi pi-trash text-lg text-white"
-        />
+        <i class="pi pi-trash text-lg text-white" />
      </Button>

      <div
@@ -63,7 +71,8 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'

 const hasRecording = defineModel<boolean>('hasRecording')
 const isRecording = defineModel<boolean>('isRecording')
@@ -76,7 +85,7 @@ const emit = defineEmits<{
  (e: 'clearRecording'): void
 }>()

-const toggleRecording = () => {
+function toggleRecording() {
  if (isRecording.value) {
    emit('stopRecording')
  } else {
@@ -84,15 +93,15 @@ const toggleRecording = () => {
  }
 }

-const handleExportRecording = () => {
+function handleExportRecording() {
  emit('exportRecording')
 }

-const handleClearRecording = () => {
+function handleClearRecording() {
  emit('clearRecording')
 }

-const formatDuration = (seconds: number): string => {
+function formatDuration(seconds: number): string {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = Math.floor(seconds % 60)
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -1,25 +1,29 @@
 <template>
  <div class="flex flex-col">
    <Button
-      class="p-button-rounded p-button-text"
-      :class="{ 'p-button-outlined': showGrid }"
+      v-tooltip.right="{ value: $t('load3d.showGrid'), showDelay: 300 }"
+      variant="textonly"
+      size="icon"
+      :class="cn('rounded-full', showGrid && 'ring-2 ring-white/50')"
+      :aria-label="$t('load3d.showGrid')"
      @click="toggleGrid"
    >
-      <i
-        v-tooltip.right="{ value: $t('load3d.showGrid'), showDelay: 300 }"
-        class="pi pi-table text-lg text-white"
-      />
+      <i class="pi pi-table text-lg text-white" />
    </Button>

    <div v-if="!hasBackgroundImage">
-      <Button class="p-button-rounded p-button-text" @click="openColorPicker">
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.backgroundColor'),
-            showDelay: 300
-          }"
-          class="pi pi-palette text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.backgroundColor'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.backgroundColor')"
+        @click="openColorPicker"
+      >
+        <i class="pi pi-palette text-lg text-white" />
        <input
          ref="colorPickerRef"
          type="color"
@@ -33,14 +37,18 @@
    </div>

    <div v-if="!hasBackgroundImage">
-      <Button class="p-button-rounded p-button-text" @click="openImagePicker">
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.uploadBackgroundImage'),
-            showDelay: 300
-          }"
-          class="pi pi-image text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: $t('load3d.uploadBackgroundImage'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.uploadBackgroundImage')"
+        @click="openImagePicker"
+      >
+        <i class="pi pi-image text-lg text-white" />
        <input
          ref="imagePickerRef"
          type="file"
@@ -53,17 +61,22 @@

    <div v-if="hasBackgroundImage">
      <Button
-        class="p-button-rounded p-button-text"
-        :class="{ 'p-button-outlined': backgroundRenderMode === 'panorama' }"
+        v-tooltip.right="{
+          value: $t('load3d.panoramaMode'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        :class="
+          cn(
+            'rounded-full',
+            backgroundRenderMode === 'panorama' && 'ring-2 ring-white/50'
+          )
+        "
+        :aria-label="$t('load3d.panoramaMode')"
        @click="toggleBackgroundRenderMode"
      >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.panoramaMode'),
-            showDelay: 300
-          }"
-          class="pi pi-globe text-lg text-white"
-        />
+        <i class="pi pi-globe text-lg text-white" />
      </Button>
    </div>

@@ -75,27 +88,29 @@

    <div v-if="hasBackgroundImage">
      <Button
-        class="p-button-rounded p-button-text"
+        v-tooltip.right="{
+          value: $t('load3d.removeBackgroundImage'),
+          showDelay: 300
+        }"
+        variant="textonly"
+        size="icon"
+        class="rounded-full"
+        :aria-label="$t('load3d.removeBackgroundImage')"
        @click="removeBackgroundImage"
      >
-        <i
-          v-tooltip.right="{
-            value: $t('load3d.removeBackgroundImage'),
-            showDelay: 300
-          }"
-          class="pi pi-times text-lg text-white"
-        />
+        <i class="pi pi-times text-lg text-white" />
      </Button>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, ref } from 'vue'

 import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
+import Button from '@/components/ui/button/Button.vue'
 import type { BackgroundRenderModeType } from '@/extensions/core/load3d/interfaces'
+import { cn } from '@/utils/tailwindUtil'

 const emit = defineEmits<{
  (e: 'updateBackgroundImage', file: File | null): void
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -1,23 +1,26 @@
 <template>
  <div class="relative rounded-lg bg-smoke-700/30">
    <div class="flex flex-col gap-2">
-      <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
-        <i
-          v-tooltip.right="{
-            value: t('load3d.openIn3DViewer'),
-            showDelay: 300
-          }"
-          class="pi pi-expand text-lg text-white"
-        />
+      <Button
+        v-tooltip.right="{
+          value: t('load3d.openIn3DViewer'),
+          showDelay: 300
+        }"
+        size="icon"
+        variant="textonly"
+        class="rounded-full"
+        :aria-label="t('load3d.openIn3DViewer')"
+        @click="openIn3DViewer"
+      >
+        <i class="pi pi-expand text-lg text-white" />
      </Button>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
-
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
--- a/src/components/load3d/controls/viewer/ViewerExportControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerExportControls.vue
@@ -9,9 +9,8 @@
    </Select>

    <Button
-      severity="secondary"
-      text
-      rounded
+      variant="muted-textonly"
+      class="rounded-full"
      @click="exportModel(exportFormat)"
    >
      {{ $t('load3d.export') }}
@@ -20,10 +19,11 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Select from 'primevue/select'
 import { ref } from 'vue'

+import Button from '@/components/ui/button/Button.vue'
+
 const emit = defineEmits<{
  (e: 'exportModel', format: string): void
 }>()
--- a/src/components/load3d/controls/viewer/ViewerSceneControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerSceneControls.vue
@@ -15,13 +15,10 @@
    </div>

    <div v-if="!hasBackgroundImage && !disableBackgroundUpload">
-      <Button
-        severity="secondary"
-        :label="$t('load3d.uploadBackgroundImage')"
-        icon="pi pi-image"
-        class="w-full"
-        @click="openImagePicker"
-      />
+      <Button variant="secondary" class="w-full" @click="openImagePicker">
+        <i class="pi pi-image" />
+        {{ $t('load3d.uploadBackgroundImage') }}
+      </Button>
      <input
        ref="imagePickerRef"
        type="file"
@@ -34,38 +31,38 @@
    <div v-if="hasBackgroundImage" class="space-y-2">
      <div class="flex gap-2">
        <Button
-          :severity="backgroundRenderMode === 'tiled' ? 'primary' : 'secondary'"
-          :label="$t('load3d.tiledMode')"
-          icon="pi pi-th-large"
+          :variant="backgroundRenderMode === 'tiled' ? 'primary' : 'secondary'"
          class="flex-1"
          @click="setBackgroundRenderMode('tiled')"
-        />
+        >
+          <i class="pi pi-th-large" />
+          {{ $t('load3d.tiledMode') }}
+        </Button>
        <Button
-          :severity="
+          :variant="
            backgroundRenderMode === 'panorama' ? 'primary' : 'secondary'
          "
-          :label="$t('load3d.panoramaMode')"
-          icon="pi pi-globe"
          class="flex-1"
          @click="setBackgroundRenderMode('panorama')"
-        />
+        >
+          <i class="pi pi-globe" />
+          {{ $t('load3d.panoramaMode') }}
+        </Button>
      </div>
-      <Button
-        severity="secondary"
-        :label="$t('load3d.removeBackgroundImage')"
-        icon="pi pi-times"
-        class="w-full"
-        @click="removeBackgroundImage"
-      />
+      <Button variant="secondary" class="w-full" @click="removeBackgroundImage">
+        <i class="pi pi-times" />
+        {{ $t('load3d.removeBackgroundImage') }}
+      </Button>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import { ref } from 'vue'

+import Button from '@/components/ui/button/Button.vue'
+
 const backgroundColor = defineModel<string>('backgroundColor')
 const showGrid = defineModel<boolean>('showGrid')
 const backgroundRenderMode = defineModel<'tiled' | 'panorama'>(