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>

src/components/ui/button/Button.vue

@@ -12,17 +12,26 @@ interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
   class?: HTMLAttributes['class']
+  loading?: boolean
+  disabled?: boolean
 }
 
-const { as = 'button', class: customClass = '' } = defineProps<Props>()
+const {
+  as = 'button',
+  class: customClass = '',
+  loading = false,
+  disabled = false
+} = defineProps<Props>()
 </script>
 
 <template>
   <Primitive
     :as
     :as-child
+    :disabled="disabled || loading"
     :class="cn(buttonVariants({ variant, size }), customClass)"
   >
-    <slot />
+    <i v-if="loading" class="pi pi-spin pi-spinner" />
+    <slot v-if="!loading" />
   </Primitive>
 </template>

src/components/ui/button/button.variants.ts

@@ -16,7 +16,9 @@ export const buttonVariants = cva({
       textonly:
         'text-base-foreground bg-transparent hover:bg-secondary-background-hover',
       'muted-textonly':
-        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover'
+        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
+      'destructive-textonly':
+        'text-destructive-background bg-transparent hover:bg-destructive-background/10'
     },
     size: {
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
@@ -41,7 +43,8 @@ const variants = [
   'inverted',
   'destructive',
   'textonly',
-  'muted-textonly'
+  'muted-textonly',
+  'destructive-textonly'
 ] as const satisfies Array<ButtonVariants['variant']>
 const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
   ButtonVariants['size']