Component: Button Migration 2: IconButton (#7598)

## Summary

Still a work in progress. Buttons with just icons are already in the
stories for button.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7598-WIP-Component-Button-Migration-2-IconButton-2cc6d73d365081c09143c63464ac60b7)
by [Unito](https://www.unito.io)

src/platform/assets/components/AssetCard.vue

@@ -41,9 +41,6 @@
           )
         "
       >
-        <IconButton v-if="false" size="sm">
-          <i class="icon-[lucide--file-text]" />
-        </IconButton>
         <MoreButton ref="dropdown-menu-button" size="sm">
           <template #default>
             <IconTextButton
@@ -123,7 +120,6 @@ import { useImage } from '@vueuse/core'
 import { computed, ref, toValue, useId, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconButton from '@/components/button/IconButton.vue'
 import IconGroup from '@/components/button/IconGroup.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import MoreButton from '@/components/button/MoreButton.vue'

src/platform/assets/components/MediaAssetCard.vue

@@ -59,12 +59,12 @@
 
           <!-- Media actions - show on hover or when playing -->
           <IconGroup v-else-if="showActionsOverlay">
-            <IconButton size="sm" @click.stop="handleZoomClick">
+            <Button size="icon" @click.stop="handleZoomClick">
               <i class="icon-[lucide--zoom-in] size-4" />
-            </IconButton>
-            <IconButton size="sm" @click.stop="handleContextMenu">
+            </Button>
+            <Button size="icon" @click.stop="handleContextMenu">
               <i class="icon-[lucide--ellipsis] size-4" />
-            </IconButton>
+            </Button>
           </IconGroup>
         </template>
 
@@ -129,13 +129,13 @@
 import { useElementHover, whenever } from '@vueuse/core'
 import { computed, defineAsyncComponent, provide, ref, toRef } from 'vue'
 
-import IconButton from '@/components/button/IconButton.vue'
 import IconGroup from '@/components/button/IconGroup.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 

src/platform/assets/components/MediaAssetFilterButton.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative inline-flex items-center">
-    <IconButton :size :type @click="toggle">
-      <i class="icon-[lucide--list-filter] text-sm" />
-    </IconButton>
+    <Button variant="secondary" size="icon" @click="toggle">
+      <i class="icon-[lucide--list-filter]" />
+    </Button>
 
     <Popover
       ref="popover"
@@ -27,17 +27,11 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
-import IconButton from '@/components/button/IconButton.vue'
-import type { BaseButtonProps } from '@/types/buttonTypes'
+import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
-interface AssetFilterButtonProps extends BaseButtonProps {}
-
 const popover = ref<InstanceType<typeof Popover>>()
 
-const { size = 'md', type = 'secondary' } =
-  defineProps<AssetFilterButtonProps>()
-
 defineEmits<{
   menuOpened: []
   menuClosed: []
@@ -57,9 +51,7 @@ const pt = computed(() => ({
   },
   content: {
     class: cn(
-      'mt-1 rounded-lg',
-      'bg-base-background text-base-foreground border border-border-default',
-      'shadow-lg'
+      'mt-1 rounded-lg bg-base-background text-base-foreground border border-border-default shadow-lg'
     )
   }
 }))

src/platform/assets/components/MediaAssetSortButton.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative inline-flex items-center">
-    <IconButton :size="size" :type="type" @click="toggle">
-      <i class="icon-[lucide--arrow-up-down] text-sm" />
-    </IconButton>
+    <Button variant="secondary" size="icon" @click="toggle">
+      <i class="icon-[lucide--arrow-up-down]" />
+    </Button>
 
     <Popover
       ref="popover"
@@ -27,16 +27,11 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
-import IconButton from '@/components/button/IconButton.vue'
-import type { BaseButtonProps } from '@/types/buttonTypes'
+import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
-interface AssetSortButtonProps extends BaseButtonProps {}
-
 const popover = ref<InstanceType<typeof Popover>>()
 
-const { size = 'md', type = 'secondary' } = defineProps<AssetSortButtonProps>()
-
 defineEmits<{
   menuOpened: []
   menuClosed: []

src/platform/assets/components/VideoHelpDialog.vue

@@ -14,13 +14,15 @@
     :style="{ width: '90vw', maxWidth: '800px' }"
   >
     <div class="relative">
-      <IconButton
+      <Button
+        variant="textonly"
+        size="icon"
         class="absolute top-4 right-6 z-10"
         :aria-label="$t('g.close')"
         @click="isVisible = false"
       >
         <i class="pi pi-times text-sm" />
-      </IconButton>
+      </Button>
       <video
         autoplay
         muted
@@ -40,7 +42,7 @@ import { useEventListener } from '@vueuse/core'
 import Dialog from 'primevue/dialog'
 import { onWatcherCleanup, watch } from 'vue'
 
-import IconButton from '@/components/button/IconButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 
 const isVisible = defineModel<boolean>({ required: true })