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-01 19:20:10 +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/platform/cloud/onboarding/CloudAuthTimeoutView.vue
+++ b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
@@ -61,21 +61,19 @@
      </p>

      <div class="flex flex-col gap-3">
-        <Button
-          :label="$t('cloudOnboarding.authTimeout.restart')"
-          class="w-full"
-          @click="handleRestart"
-        />
+        <Button class="w-full" @click="handleRestart">
+          {{ $t('cloudOnboarding.authTimeout.restart') }}
+        </Button>
      </div>
    </div>
  </div>
 </template>

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

+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'

 interface Props {
--- a/src/platform/cloud/onboarding/CloudForgotPasswordView.vue
+++ b/src/platform/cloud/onboarding/CloudForgotPasswordView.vue
@@ -42,19 +42,21 @@
        <div class="flex flex-col gap-4">
          <Button
            type="submit"
-            :label="t('cloudForgotPassword_sendResetLink')"
            :loading="loading"
            :disabled="!email || loading"
            class="h-10 font-medium text-white"
-          />
+          >
+            {{ t('cloudForgotPassword_sendResetLink') }}
+          </Button>

          <Button
            type="button"
-            :label="t('cloudForgotPassword_backToLogin')"
-            severity="secondary"
+            variant="secondary"
            class="h-10 bg-[#2d2e32]"
            @click="navigateToLogin"
-          />
+          >
+            {{ t('cloudForgotPassword_backToLogin') }}
+          </Button>
        </div>
      </form>

@@ -67,13 +69,13 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'

+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'

 const { t } = useI18n()
--- a/src/platform/cloud/onboarding/CloudLoginView.vue
+++ b/src/platform/cloud/onboarding/CloudLoginView.vue
@@ -33,7 +33,7 @@
        <Button
          type="button"
          class="h-10 bg-[#2d2e32]"
-          severity="secondary"
+          variant="secondary"
          @click="signInWithGoogle"
        >
          <i class="pi pi-google mr-2"></i>
@@ -43,7 +43,7 @@
        <Button
          type="button"
          class="h-10 bg-[#2d2e32]"
-          severity="secondary"
+          variant="secondary"
          @click="signInWithGithub"
        >
          <i class="pi pi-github mr-2"></i>
@@ -75,13 +75,13 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'

+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import CloudSignInForm from '@/platform/cloud/onboarding/components/CloudSignInForm.vue'
 import { useToastStore } from '@/platform/updates/common/toastStore'
--- a/src/platform/cloud/onboarding/CloudSignupView.vue
+++ b/src/platform/cloud/onboarding/CloudSignupView.vue
@@ -38,7 +38,7 @@
        <Button
          type="button"
          class="h-10 bg-[#2d2e32]"
-          severity="secondary"
+          variant="secondary"
          @click="signInWithGoogle"
        >
          <i class="pi pi-google mr-2"></i>
@@ -48,7 +48,7 @@
        <Button
          type="button"
          class="h-10 bg-[#2d2e32]"
-          severity="secondary"
+          variant="secondary"
          @click="signInWithGithub"
        >
          <i class="pi pi-github mr-2"></i>
@@ -91,7 +91,6 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Message from 'primevue/message'
 import { onMounted, ref } from 'vue'
@@ -99,6 +98,7 @@ import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'

 import SignUpForm from '@/components/dialog/content/signin/SignUpForm.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
--- a/src/platform/cloud/onboarding/CloudSurveyView.vue
+++ b/src/platform/cloud/onboarding/CloudSurveyView.vue
@@ -44,11 +44,12 @@
          <div class="flex justify-between pt-4">
            <span />
            <Button
-              :label="$t('g.next')"
              :disabled="!validStep1"
              class="h-10 w-full border-none text-white"
              @click="goTo(2, activateCallback)"
-            />
+            >
+              {{ $t('g.next') }}
+            </Button>
          </div>
        </StepPanel>

@@ -93,17 +94,19 @@

          <div class="flex gap-6 pt-4">
            <Button
-              :label="$t('g.back')"
-              severity="secondary"
+              variant="secondary"
              class="flex-1 text-white"
              @click="goTo(1, activateCallback)"
-            />
+            >
+              {{ $t('g.back') }}
+            </Button>
            <Button
-              :label="$t('g.next')"
              :disabled="!validStep2"
              class="h-10 flex-1 text-white"
              @click="goTo(3, activateCallback)"
-            />
+            >
+              {{ $t('g.next') }}
+            </Button>
          </div>
        </StepPanel>

@@ -148,17 +151,19 @@

          <div class="flex gap-6 pt-4">
            <Button
-              :label="$t('g.back')"
-              severity="secondary"
+              variant="secondary"
              class="flex-1 text-white"
              @click="goTo(2, activateCallback)"
-            />
+            >
+              {{ $t('g.back') }}
+            </Button>
            <Button
-              :label="$t('g.next')"
              :disabled="!validStep3"
              class="h-10 flex-1 border-none text-white"
              @click="goTo(4, activateCallback)"
-            />
+            >
+              {{ $t('g.next') }}
+            </Button>
          </div>
        </StepPanel>

@@ -193,18 +198,20 @@

          <div class="flex gap-6 pt-4">
            <Button
-              :label="$t('g.back')"
-              severity="secondary"
+              variant="secondary"
              class="flex-1 text-white"
              @click="goTo(3, activateCallback)"
-            />
+            >
+              {{ $t('g.back') }}
+            </Button>
            <Button
-              :label="$t('g.submit')"
              :disabled="!validStep4 || isSubmitting"
              :loading="isSubmitting"
              class="h-10 flex-1 border-none text-white"
              @click="onSubmitSurvey"
-            />
+            >
+              {{ $t('g.submit') }}
+            </Button>
          </div>
        </StepPanel>
      </StepPanels>
@@ -213,7 +220,6 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import InputText from 'primevue/inputtext'
 import ProgressBar from 'primevue/progressbar'
@@ -225,6 +231,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'

+import Button from '@/components/ui/button/Button.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import {
  getSurveyCompletedStatus,
--- a/src/platform/cloud/onboarding/UserCheckView.vue
+++ b/src/platform/cloud/onboarding/UserCheckView.vue
@@ -5,16 +5,13 @@
  <div v-else-if="error" class="flex h-full items-center justify-center p-8">
    <div class="max-w-[100vw] p-2 text-center lg:w-96">
      <p class="mb-4 text-red-500">{{ errorMessage }}</p>
-      <Button
-        :label="
+      <Button :loading="isRetrying" class="w-full" @click="handleRetry">
+        {{
          isRetrying
            ? $t('cloudOnboarding.retrying')
            : $t('cloudOnboarding.retry')
-        "
-        :loading="isRetrying"
-        class="w-full"
-        @click="handleRetry"
-      />
+        }}
+      </Button>
    </div>
  </div>
  <div v-else class="flex items-center justify-center">
@@ -24,11 +21,11 @@

 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
-import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'

+import Button from '@/components/ui/button/Button.vue'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import {
--- a/src/platform/cloud/onboarding/components/CloudSignInForm.vue
+++ b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
@@ -67,10 +67,11 @@
    <Button
      v-else
      type="submit"
-      :label="t('auth.login.loginButton')"
      class="mt-4 h-10 font-medium text-white"
      :disabled="!$form.valid"
-    />
+    >
+      {{ t('auth.login.loginButton') }}
+    </Button>
  </Form>
 </template>

@@ -78,7 +79,6 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
-import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Password from 'primevue/password'
@@ -86,6 +86,7 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

+import Button from '@/components/ui/button/Button.vue'
 import { signInSchema } from '@/schemas/signInSchema'
 import type { SignInData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
--- a/src/platform/cloud/onboarding/components/CloudTemplate.vue
+++ b/src/platform/cloud/onboarding/components/CloudTemplate.vue
@@ -49,7 +49,7 @@
            <Button
              type="button"
              class="h-10 bg-black font-bold text-white"
-              severity="secondary"
+              variant="secondary"
              @click="handleDownloadClick"
            >
              {{ t('cloudStart_download') }}
@@ -62,8 +62,7 @@
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
-
+import Button from '@/components/ui/button/Button.vue'
 import { t } from '@/i18n'
 import videoPoster from '@/platform/cloud/onboarding/assets/videos/thumbnail.png'
 import videoSrc from '@/platform/cloud/onboarding/assets/videos/video.mp4'
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -183,25 +183,22 @@
        </div>
        <div class="flex flex-col p-8">
          <Button
-            :label="getButtonLabel(tier)"
-            :severity="getButtonSeverity(tier)"
+            :variant="getButtonSeverity(tier)"
            :disabled="isLoading || isCurrentPlan(tier.key)"
            :loading="loadingTier === tier.key"
            :class="
              cn(
                'h-10 w-full',
+                getButtonTextClass(tier),
                tier.key === 'creator'
                  ? 'bg-base-foreground border-transparent hover:bg-inverted-background-hover'
                  : 'bg-secondary-background border-transparent hover:bg-secondary-background-hover focus:bg-secondary-background-selected'
              )
            "
-            :pt="{
-              label: {
-                class: getButtonTextClass(tier)
-              }
-            }"
            @click="() => handleSubscribe(tier.key)"
-          />
+          >
+            {{ getButtonLabel(tier) }}
+          </Button>
        </div>
      </div>
    </div>
@@ -241,13 +238,13 @@

 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
-import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import SelectButton from 'primevue/selectbutton'
 import type { ToggleButtonPassThroughMethodOptions } from 'primevue/togglebutton'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getComfyApiBaseUrl } from '@/config/comfyApi'
--- a/src/platform/cloud/subscription/components/SubscribeButton.vue
+++ b/src/platform/cloud/subscription/components/SubscribeButton.vue
@@ -1,10 +1,9 @@
 <template>
  <Button
-    :label="label || $t('subscription.required.subscribe')"
-    :size="size"
+    :size
    :loading="isLoading"
    :disabled="isPolling"
-    severity="primary"
+    variant="primary"
    :style="
      variant === 'gradient'
        ? {
@@ -13,39 +12,33 @@
          }
        : undefined
    "
-    :pt="{
-      root: {
-        class: rootClass
-      }
-    }"
+    :class="cn('font-bold', fluid && 'w-full')"
    @click="handleSubscribe"
-  />
+  >
+    {{ label || $t('subscription.required.subscribe') }}
+  </Button>
 </template>

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

+import Button from '@/components/ui/button/Button.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { cn } from '@/utils/tailwindUtil'

-const props = withDefaults(
-  defineProps<{
-    label?: string
-    size?: 'small' | 'large'
-    variant?: 'default' | 'gradient'
-    fluid?: boolean
-  }>(),
-  {
-    size: 'large',
-    variant: 'default',
-    fluid: true
-  }
-)
-
-const rootClass = computed(() => cn('font-bold', props.fluid && 'w-full'))
+const {
+  size = 'lg',
+  fluid = true,
+  variant = 'default',
+  label
+} = defineProps<{
+  label?: string
+  size?: 'sm' | 'lg'
+  variant?: 'default' | 'gradient'
+  fluid?: boolean
+}>()

 const emit = defineEmits<{
  subscribed: []
--- a/src/platform/cloud/subscription/components/SubscribeToRun.vue
+++ b/src/platform/cloud/subscription/components/SubscribeToRun.vue
@@ -4,34 +4,28 @@
      value: $t('subscription.subscribeToRunFull'),
      showDelay: 600
    }"
-    class="subscribe-to-run-button"
-    :label="buttonLabel"
-    icon="pi pi-lock"
-    severity="primary"
-    size="small"
+    class="subscribe-to-run-button whitespace-nowrap"
+    variant="primary"
+    size="sm"
    :style="{
      background: 'var(--color-subscription-button-gradient)',
-      color: 'var(--color-white)'
-    }"
-    :pt="{
-      root: {
-        class: 'whitespace-nowrap',
-        style: {
-          borderColor: 'transparent'
-        }
-      }
+      color: 'var(--color-white)',
+      borderColor: 'transparent'
    }"
    data-testid="subscribe-to-run-button"
    @click="handleSubscribeToRun"
-  />
+  >
+    <i class="pi pi-lock" />
+    {{ buttonLabel }}
+  </Button>
 </template>

 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import Button from 'primevue/button'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

+import Button from '@/components/ui/button/Button.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -54,42 +54,29 @@

              <Button
                v-if="isActiveSubscription"
-                :label="$t('subscription.manageSubscription')"
-                severity="secondary"
-                class="ml-auto bg-interface-menu-component-surface-selected"
-                :pt="{
-                  root: {
-                    style: 'border-radius: 8px; padding: 8px 16px;'
-                  },
-                  label: {
-                    class: 'text-sm font-normal text-text-primary'
-                  }
-                }"
+                variant="secondary"
+                class="ml-auto rounded-lg px-4 py-2 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
                @click="
                  async () => {
                    await authActions.accessBillingPortal()
                  }
                "
-              />
+              >
+                {{ $t('subscription.manageSubscription') }}
+              </Button>
              <Button
                v-if="isActiveSubscription"
-                :label="$t('subscription.upgradePlan')"
-                severity="primary"
-                :pt="{
-                  root: {
-                    style: 'border-radius: 8px; padding: 8px 16px;'
-                  },
-                  label: {
-                    class: 'text-sm font-normal text-text-primary'
-                  }
-                }"
+                variant="primary"
+                class="rounded-lg px-4 py-2 text-sm font-normal text-text-primary"
                @click="showSubscriptionDialog"
-              />
+              >
+                {{ $t('subscription.upgradePlan') }}
+              </Button>

              <SubscribeButton
                v-else
                :label="$t('subscription.subscribeNow')"
-                size="small"
+                size="sm"
                :fluid="false"
                class="text-xs"
                @subscribed="handleRefresh"
@@ -109,21 +96,14 @@
                  "
                >
                  <Button
-                    icon="pi pi-sync"
-                    text
-                    size="small"
+                    variant="muted-textonly"
+                    size="icon-sm"
                    class="absolute top-0.5 right-0"
                    :loading="isLoadingBalance"
-                    :pt="{
-                      icon: {
-                        class: 'text-text-secondary text-xs'
-                      },
-                      loadingIcon: {
-                        class: 'text-text-secondary text-xs'
-                      }
-                    }"
                    @click="handleRefresh"
-                  />
+                  >
+                    <i class="pi pi-sync text-text-secondary text-xs" />
+                  </Button>

                  <div class="flex flex-col gap-2">
                    <div class="text-sm text-muted">
@@ -183,17 +163,14 @@
                        </div>
                        <Button
                          v-tooltip="$t('subscription.prepaidCreditsInfo')"
-                          icon="pi pi-question-circle"
-                          text
-                          rounded
-                          size="small"
-                          class="h-4 w-4 shrink-0"
-                          :pt="{
-                            icon: {
-                              class: 'text-text-secondary text-xs'
-                            }
-                          }"
-                        />
+                          variant="muted-textonly"
+                          size="icon-sm"
+                          class="h-4 w-4 shrink-0 rounded-full"
+                        >
+                          <i
+                            class="pi pi-question-circle text-text-secondary text-xs"
+                          />
+                        </Button>
                      </div>
                    </div>
                  </div>
@@ -209,19 +186,12 @@
                    </a>
                    <Button
                      v-if="isActiveSubscription"
-                      :label="$t('subscription.addCredits')"
-                      severity="secondary"
-                      class="p-2 min-h-8 bg-interface-menu-component-surface-selected"
-                      :pt="{
-                        root: {
-                          style: 'border-radius: 8px;'
-                        },
-                        label: {
-                          class: 'text-sm font-normal text-text-primary'
-                        }
-                      }"
+                      variant="secondary"
+                      class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
                      @click="handleAddApiCredits"
-                    />
+                    >
+                      {{ $t('subscription.addCredits') }}
+                    </Button>
                  </div>
                </div>
              </div>
@@ -276,86 +246,53 @@
      >
        <div class="flex gap-2">
          <Button
-            :label="$t('subscription.learnMore')"
-            text
-            severity="secondary"
-            icon="pi pi-question-circle"
-            class="text-xs"
-            :pt="{
-              label: {
-                class: 'text-text-secondary'
-              },
-              icon: {
-                class: 'text-text-secondary text-xs'
-              }
-            }"
+            variant="muted-textonly"
+            class="text-xs text-text-secondary"
            @click="handleLearnMoreClick"
-          />
+          >
+            <i class="pi pi-question-circle text-text-secondary text-xs" />
+            {{ $t('subscription.learnMore') }}
+          </Button>
          <Button
-            :label="$t('subscription.partnerNodesCredits')"
-            text
-            severity="secondary"
-            icon="pi pi-question-circle"
-            class="text-xs"
-            :pt="{
-              label: {
-                class: 'text-text-secondary'
-              },
-              icon: {
-                class: 'text-text-secondary text-xs'
-              }
-            }"
+            variant="muted-textonly"
+            class="text-xs text-text-secondary"
            @click="handleOpenPartnerNodesInfo"
-          />
+          >
+            <i class="pi pi-question-circle text-text-secondary text-xs" />
+            {{ $t('subscription.partnerNodesCredits') }}
+          </Button>
          <Button
-            :label="$t('subscription.messageSupport')"
-            text
-            severity="secondary"
-            icon="pi pi-comment"
-            class="text-xs"
+            variant="muted-textonly"
+            class="text-xs text-text-secondary"
            :loading="isLoadingSupport"
-            :pt="{
-              label: {
-                class: 'text-text-secondary'
-              },
-              icon: {
-                class: 'text-text-secondary text-xs'
-              }
-            }"
            @click="handleMessageSupport"
-          />
+          >
+            <i class="pi pi-comment text-text-secondary text-xs" />
+            {{ $t('subscription.messageSupport') }}
+          </Button>
        </div>

        <Button
-          :label="$t('subscription.invoiceHistory')"
-          text
-          severity="secondary"
-          icon="pi pi-external-link"
-          icon-pos="right"
-          class="text-xs"
-          :pt="{
-            label: {
-              class: 'text-text-secondary'
-            },
-            icon: {
-              class: 'text-text-secondary text-xs'
-            }
-          }"
+          variant="muted-textonly"
+          class="text-xs text-text-secondary"
          @click="handleInvoiceHistory"
-        />
+        >
+          {{ $t('subscription.invoiceHistory') }}
+          <i class="pi pi-external-link text-text-secondary text-xs" />
+        </Button>
      </div>
    </div>
  </TabPanel>
 </template>

 <script setup lang="ts">
-import Button from 'primevue/button'
 import Skeleton from 'primevue/skeleton'
 import TabPanel from 'primevue/tabpanel'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

 import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
--- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
@@ -4,16 +4,14 @@
    class="relative flex flex-col p-4 pt-8 md:p-16 !overflow-y-auto h-full gap-8"
  >
    <Button
-      :pt="{
-        icon: { class: 'text-xl' }
-      }"
-      icon="pi pi-times"
-      text
-      rounded
-      class="shrink-0 text-text-secondary hover:bg-white/10 absolute right-2.5 top-2.5"
+      size="icon"
+      variant="muted-textonly"
+      class="rounded-full shrink-0 text-text-secondary hover:bg-white/10 absolute right-2.5 top-2.5"
      :aria-label="$t('g.close')"
      @click="handleClose"
-    />
+    >
+      <i class="pi pi-times text-xl" />
+    </Button>
    <div class="text-center">
      <h2 class="text-xl lg:text-2xl text-muted-foreground m-0">
        {{ $t('subscription.description') }}
@@ -29,37 +27,36 @@
      </p>
      <div class="flex items-center gap-1.5">
        <Button
-          :label="$t('subscription.contactUs')"
-          text
-          severity="secondary"
-          icon="pi pi-comments"
-          icon-pos="right"
+          variant="muted-textonly"
          class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
          @click="handleContactUs"
-        />
+        >
+          {{ $t('subscription.contactUs') }}
+          <i class="pi pi-comments" />
+        </Button>
        <span class="text-sm text-text-secondary">{{ $t('g.or') }}</span>
        <Button
-          :label="$t('subscription.viewEnterprise')"
-          text
-          severity="secondary"
-          icon="pi pi-external-link"
-          icon-pos="right"
+          variant="muted-textonly"
          class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
          @click="handleViewEnterprise"
-        />
+        >
+          {{ $t('subscription.viewEnterprise') }}
+          <i class="pi pi-external-link" />
+        </Button>
      </div>
    </div>
  </div>
  <div v-else class="legacy-dialog relative grid h-full grid-cols-5">
    <!-- Custom close button -->
    <Button
-      icon="pi pi-times"
-      text
-      rounded
-      class="absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
+      size="icon"
+      variant="muted-textonly"
+      class="rounded-full absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
      :aria-label="$t('g.close')"
      @click="handleClose"
-    />
+    >
+      <i class="pi pi-times" />
+    </Button>

    <div
      class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
@@ -122,10 +119,10 @@
 </template>

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

 import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
 import PricingTable from '@/platform/cloud/subscription/components/PricingTable.vue'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'