replace el-button-group with ButtonGroup

src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue

@@ -22,17 +22,15 @@
                 style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
-            <el-button-group style="padding-bottom: 10px; padding-top: 10px">
-                <el-button
-                    type="default"
-                    size="small"
-                    :icon="Upload"
-                    :loading="changeAvatarImageDialogLoading"
-                    :disabled="changeAvatarImageDialogLoading"
-                    @click="uploadAvatarImage">
-                    {{ t('dialog.change_content_image.upload') }}
-                </el-button>
-            </el-button-group>
+            <el-button
+                type="default"
+                size="small"
+                :icon="Upload"
+                :loading="changeAvatarImageDialogLoading"
+                :disabled="changeAvatarImageDialogLoading"
+                @click="uploadAvatarImage">
+                {{ t('dialog.change_content_image.upload') }}
+            </el-button>
             <br />
             <div class="x-change-image-item">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />

src/components/dialogs/GroupDialog/GallerySelectDialog.vue

@@ -15,22 +15,24 @@
                 accept="image/*"
                 style="display: none"
                 @change="onFileChangeGallery" />
-            <el-button-group>
-                <el-button type="default" size="small" :icon="Close" @click="selectImageGallerySelect('', '')">{{
-                    t('dialog.gallery_select.none')
-                }}</el-button>
-                <el-button type="default" size="small" :icon="Refresh" @click="refreshGalleryTable">{{
-                    t('dialog.gallery_select.refresh')
-                }}</el-button>
-                <el-button
-                    type="default"
-                    size="small"
-                    :icon="Upload"
+            <ButtonGroup>
+                <Button variant="outline" size="sm" @click="selectImageGallerySelect('', '')">
+                    <Close />
+                    {{ t('dialog.gallery_select.none') }}
+                </Button>
+                <Button variant="outline" size="sm" @click="refreshGalleryTable">
+                    <Refresh />
+                    {{ t('dialog.gallery_select.refresh') }}
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
                     :disabled="!isLocalUserVrcPlusSupporter"
-                    @click="displayGalleryUpload"
-                    >{{ t('dialog.gallery_select.upload') }}</el-button
-                >
-            </el-button-group>
+                    @click="displayGalleryUpload">
+                    <Upload />
+                    {{ t('dialog.gallery_select.upload') }}
+                </Button>
+            </ButtonGroup>
             <br />
             <div
                 v-for="image in galleryTable"
@@ -54,6 +56,8 @@
 
 <script setup>
     import { Close, Refresh, Upload } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { ButtonGroup } from '@/components/ui/button-group';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/WorldDialog/ChangeWorldImageDialog.vue

@@ -22,17 +22,15 @@
                 style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
-            <el-button-group style="padding-bottom: 10px; padding-top: 10px">
-                <el-button
-                    type="default"
-                    size="small"
-                    :icon="Upload"
-                    :loading="changeWorldImageDialogLoading"
-                    :disabled="changeWorldImageDialogLoading"
-                    @click="uploadWorldImage">
-                    {{ t('dialog.change_content_image.upload') }}
-                </el-button>
-            </el-button-group>
+            <el-button
+                type="default"
+                size="small"
+                :icon="Upload"
+                :loading="changeWorldImageDialogLoading"
+                :disabled="changeWorldImageDialogLoading"
+                @click="uploadWorldImage">
+                {{ t('dialog.change_content_image.upload') }}
+            </el-button>
             <br />
             <div class="x-change-image-item">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />

src/components/ui/button-group/ButtonGroup.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    import { buttonGroupVariants } from '.';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        orientation: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        role="group"
+        data-slot="button-group"
+        :data-orientation="props.orientation"
+        :class="cn(buttonGroupVariants({ orientation: props.orientation }), props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/button-group/ButtonGroupSeparator.vue

@@ -0,0 +1,22 @@
+<script setup>
+    import { Separator } from '@/components/ui/separator';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        orientation: { type: String, required: false, default: 'vertical' },
+        decorative: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <Separator
+        data-slot="button-group-separator"
+        v-bind="delegatedProps"
+        :orientation="props.orientation"
+        :class="cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', props.class)" />
+</template>

src/components/ui/button-group/ButtonGroupText.vue

@@ -0,0 +1,28 @@
+<script setup>
+    import { Primitive } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false },
+        orientation: { type: null, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false, default: 'div' }
+    });
+</script>
+
+<template>
+    <Primitive
+        role="group"
+        data-slot="button-group"
+        :data-orientation="props.orientation"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        ">
+        <slot />
+    </Primitive>
+</template>

src/components/ui/button-group/index.js

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as ButtonGroupSeparator } from './ButtonGroupSeparator.vue';
+export { default as ButtonGroupText } from './ButtonGroupText.vue';
+
+export const buttonGroupVariants = cva(
+    "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+    {
+        variants: {
+            orientation: {
+                horizontal:
+                    '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+                vertical:
+                    'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none'
+            }
+        },
+        defaultVariants: {
+            orientation: 'horizontal'
+        }
+    }
+);

src/components/ui/separator/Separator.vue

@@ -0,0 +1,27 @@
+<script setup>
+    import { Separator } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        orientation: { type: String, required: false, default: 'horizontal' },
+        decorative: { type: Boolean, required: false, default: true },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <Separator
+        data-slot="separator"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+                props.class
+            )
+        " />
+</template>

src/components/ui/separator/index.js

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue';

src/views/Charts/components/InstanceActivity.vue

@@ -72,19 +72,26 @@
                         </div>
                     </PopoverContent>
                 </Popover>
-                <el-button-group style="margin-right: 5px">
+                <ButtonGroup style="margin-right: 5px">
                     <TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
-                        <el-button
-                            :icon="ArrowLeft"
+                        <Button
+                            variant="outline"
+                            size="icon-sm"
                             :disabled="isPrevDayBtnDisabled"
-                            @click="changeSelectedDateFromBtn(false)"></el-button>
+                            @click="changeSelectedDateFromBtn(false)">
+                            <ArrowLeft />
+                        </Button>
                     </TooltipWrapper>
                     <TooltipWrapper :content="t('view.charts.instance_activity.next_day')" side="top">
-                        <el-button :disabled="isNextDayBtnDisabled" @click="changeSelectedDateFromBtn(true)"
-                            ><el-icon class="el-icon--right"><ArrowRight /></el-icon
-                        ></el-button>
+                        <Button
+                            variant="outline"
+                            size="icon-sm"
+                            :disabled="isNextDayBtnDisabled"
+                            @click="changeSelectedDateFromBtn(true)">
+                            <ArrowRight />
+                        </Button>
                     </TooltipWrapper>
-                </el-button-group>
+                </ButtonGroup>
                 <el-date-picker
                     v-model="selectedDate"
                     type="date"
@@ -126,6 +133,8 @@
 <script setup>
     import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { ButtonGroup } from '@/components/ui/button-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Search/Search.vue

@@ -48,22 +48,24 @@
                         </div>
                     </div>
                 </div>
-                <el-button-group v-if="searchUserResults.length" style="margin-top: 15px">
-                    <el-button
+                <ButtonGroup v-if="searchUserResults.length" style="margin-top: 15px">
+                    <Button
+                        variant="outline"
+                        size="sm"
                         :disabled="!searchUserParams.offset"
-                        :icon="Back"
-                        size="small"
-                        @click="handleMoreSearchUser(-1)"
-                        >{{ t('view.search.prev_page') }}</el-button
-                    >
-                    <el-button
+                        @click="handleMoreSearchUser(-1)">
+                        <Back />
+                        {{ t('view.search.prev_page') }}
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
                         :disabled="searchUserResults.length < 10"
-                        :icon="Right"
-                        size="small"
-                        @click="handleMoreSearchUser(1)"
-                        >{{ t('view.search.next_page') }}</el-button
-                    >
-                </el-button-group>
+                        @click="handleMoreSearchUser(1)">
+                        <Right />
+                        {{ t('view.search.next_page') }}
+                    </Button>
+                </ButtonGroup>
             </el-tab-pane>
             <el-tab-pane
                 v-loading="isSearchWorldLoading"
@@ -108,22 +110,24 @@
                         </div>
                     </div>
                 </div>
-                <el-button-group v-if="searchWorldResults.length" style="margin-top: 15px">
-                    <el-button
+                <ButtonGroup v-if="searchWorldResults.length" style="margin-top: 15px">
+                    <Button
+                        variant="outline"
+                        size="sm"
                         :disabled="!searchWorldParams.offset"
-                        :icon="Back"
-                        size="small"
-                        @click="moreSearchWorld(-1)"
-                        >{{ t('view.search.prev_page') }}</el-button
-                    >
-                    <el-button
+                        @click="moreSearchWorld(-1)">
+                        <Back />
+                        {{ t('view.search.prev_page') }}
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
                         :disabled="searchWorldResults.length < 10"
-                        :icon="Right"
-                        size="small"
-                        @click="moreSearchWorld(1)"
-                        >{{ t('view.search.next_page') }}</el-button
-                    >
-                </el-button-group>
+                        @click="moreSearchWorld(1)">
+                        <Right />
+                        {{ t('view.search.next_page') }}
+                    </Button>
+                </ButtonGroup>
             </el-tab-pane>
             <el-tab-pane
                 v-loading="isSearchAvatarLoading"
@@ -233,25 +237,23 @@
                         </div>
                     </div>
                 </div>
-                <el-button-group v-if="searchAvatarPage.length" style="margin-top: 15px">
-                    <el-button
-                        :disabled="!searchAvatarPageNum"
-                        :icon="Back"
-                        size="small"
-                        @click="moreSearchAvatar(-1)"
-                        >{{ t('view.search.prev_page') }}</el-button
-                    >
-                    <el-button
+                <ButtonGroup v-if="searchAvatarPage.length" style="margin-top: 15px">
+                    <Button variant="outline" size="sm" :disabled="!searchAvatarPageNum" @click="moreSearchAvatar(-1)">
+                        <Back />
+                        {{ t('view.search.prev_page') }}
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
                         :disabled="
                             searchAvatarResults.length < 10 ||
                             (searchAvatarPageNum + 1) * 10 >= searchAvatarResults.length
                         "
-                        :icon="Right"
-                        size="small"
-                        @click="moreSearchAvatar(1)"
-                        >{{ t('view.search.next_page') }}</el-button
-                    >
-                </el-button-group>
+                        @click="moreSearchAvatar(1)">
+                        <Right />
+                        {{ t('view.search.next_page') }}
+                    </Button>
+                </ButtonGroup>
             </el-tab-pane>
             <el-tab-pane
                 v-loading="isSearchGroupLoading"
@@ -285,22 +287,24 @@
                         </div>
                     </div>
                 </div>
-                <el-button-group v-if="searchGroupResults.length" style="margin-top: 15px">
-                    <el-button
+                <ButtonGroup v-if="searchGroupResults.length" style="margin-top: 15px">
+                    <Button
+                        variant="outline"
+                        size="sm"
                         :disabled="!searchGroupParams.offset"
-                        :icon="Back"
-                        size="small"
-                        @click="moreSearchGroup(-1)"
-                        >{{ t('view.search.prev_page') }}</el-button
-                    >
-                    <el-button
+                        @click="moreSearchGroup(-1)">
+                        <Back />
+                        {{ t('view.search.prev_page') }}
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
                         :disabled="searchGroupResults.length < 10"
-                        :icon="Right"
-                        size="small"
-                        @click="moreSearchGroup(1)"
-                        >{{ t('view.search.next_page') }}</el-button
-                    >
-                </el-button-group>
+                        @click="moreSearchGroup(1)">
+                        <Right />
+                        {{ t('view.search.next_page') }}
+                    </Button>
+                </ButtonGroup>
             </el-tab-pane>
         </el-tabs>
     </div>
@@ -308,6 +312,8 @@
 
 <script setup>
     import { ArrowDown, Back, Check, Delete, Refresh, Right } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { ButtonGroup } from '@/components/ui/button-group';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';

src/views/Settings/components/Tabs/AdvancedTab.vue

@@ -3,25 +3,39 @@
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ t('view.settings.advanced.advanced.header') }}</span>
             <div class="options-container-item" style="margin-top: 15px">
-                <el-button-group>
-                    <el-button size="small" :icon="Operation" @click="showVRChatConfig()">VRChat config.json</el-button>
-                    <el-button size="small" :icon="Operation" @click="showLaunchOptions()">{{
-                        t('view.settings.advanced.advanced.launch_options')
-                    }}</el-button>
-                    <el-button size="small" :icon="Goods" @click="showRegistryBackupDialog()">{{
-                        t('view.settings.advanced.advanced.vrc_registry_backup')
-                    }}</el-button>
-                </el-button-group>
+                <ButtonGroup>
+                    <Button variant="outline" size="sm" @click="showVRChatConfig()">
+                        <Operation />
+                        VRChat config.json
+                    </Button>
+                    <Button variant="outline" size="sm" @click="showLaunchOptions()">
+                        <Operation />
+                        {{ t('view.settings.advanced.advanced.launch_options') }}
+                    </Button>
+                    <Button variant="outline" size="sm" @click="showRegistryBackupDialog()">
+                        <Goods />
+                        {{ t('view.settings.advanced.advanced.vrc_registry_backup') }}
+                    </Button>
+                </ButtonGroup>
             </div>
         </div>
         <div class="options-container">
             <span class="header">{{ t('view.settings.advanced.advanced.common_folders') }}</span>
             <div class="options-container-item" style="margin-top: 15px">
-                <el-button-group>
-                    <el-button size="small" :icon="Folder" @click="openVrcxAppDataFolder()">VRCX Data</el-button>
-                    <el-button size="small" :icon="Folder" @click="openVrcAppDataFolder()">VRChat Data</el-button>
-                    <el-button size="small" :icon="Folder" @click="openCrashVrcCrashDumps()">Crash Dumps</el-button>
-                </el-button-group>
+                <ButtonGroup>
+                    <Button variant="outline" size="sm" @click="openVrcxAppDataFolder()">
+                        <Folder />
+                        VRCX Data
+                    </Button>
+                    <Button variant="outline" size="sm" @click="openVrcAppDataFolder()">
+                        <Folder />
+                        VRChat Data
+                    </Button>
+                    <Button variant="outline" size="sm" @click="openCrashVrcCrashDumps()">
+                        <Folder />
+                        Crash Dumps
+                    </Button>
+                </ButtonGroup>
             </div>
         </div>
         <div class="options-container">
@@ -390,6 +404,8 @@
         User
     } from '@element-plus/icons-vue';
     import { computed, reactive, ref } from 'vue';
+    import { Button } from '@/components/ui/button';
+    import { ButtonGroup } from '@/components/ui/button-group';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/views/Tools/Gallery.vue

@@ -30,27 +30,28 @@
                 <span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 1200x900px (4:3)</span>
                 <br />
                 <br />
-                <el-button-group>
-                    <el-button type="default" size="small" @click="refreshGalleryTable" :icon="Refresh">
+                <ButtonGroup>
+                    <Button variant="outline" size="sm" @click="refreshGalleryTable">
+                        <Refresh />
                         {{ t('dialog.gallery_icons.refresh') }}
-                    </el-button>
-                    <el-button
-                        type="default"
-                        size="small"
-                        @click="displayGalleryUpload"
-                        :icon="Upload"
-                        :disabled="!isLocalUserVrcPlusSupporter || isUploading">
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        :disabled="!isLocalUserVrcPlusSupporter || isUploading"
+                        @click="displayGalleryUpload">
+                        <Upload />
                         {{ t('dialog.gallery_icons.upload') }}
-                    </el-button>
-                    <el-button
-                        type="default"
-                        size="small"
-                        @click="setProfilePicOverride('')"
-                        :icon="Close"
-                        :disabled="!currentUser.profilePicOverride">
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        :disabled="!currentUser.profilePicOverride"
+                        @click="setProfilePicOverride('')">
+                        <Close />
                         {{ t('dialog.gallery_icons.clear') }}
-                    </el-button>
-                </el-button-group>
+                    </Button>
+                </ButtonGroup>
                 <br />
                 <div
                     class="x-friend-item"
@@ -102,27 +103,24 @@
                 <span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 2048x2048px (1:1)</span>
                 <br />
                 <br />
-                <el-button-group>
-                    <el-button type="default" size="small" @click="refreshVRCPlusIconsTable" :icon="Refresh">
+                <ButtonGroup>
+                    <Button variant="outline" size="sm" @click="refreshVRCPlusIconsTable">
+                        <Refresh />
                         {{ t('dialog.gallery_icons.refresh') }}
-                    </el-button>
-                    <el-button
-                        type="default"
-                        size="small"
-                        @click="displayVRCPlusIconUpload"
-                        :icon="Upload"
-                        :disabled="!isLocalUserVrcPlusSupporter || isUploading">
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        :disabled="!isLocalUserVrcPlusSupporter || isUploading"
+                        @click="displayVRCPlusIconUpload">
+                        <Upload />
                         {{ t('dialog.gallery_icons.upload') }}
-                    </el-button>
-                    <el-button
-                        type="default"
-                        size="small"
-                        @click="setVRCPlusIcon('')"
-                        :icon="Close"
-                        :disabled="!currentUser.userIcon">
+                    </Button>
+                    <Button variant="outline" size="sm" :disabled="!currentUser.userIcon" @click="setVRCPlusIcon('')">
+                        <Close />
                         {{ t('dialog.gallery_icons.clear') }}
-                    </el-button>
-                </el-button-group>
+                    </Button>
+                </ButtonGroup>
                 <br />
                 <div
                     class="x-friend-item"
@@ -177,19 +175,20 @@
                 <br />
                 <br />
                 <div>
-                    <el-button-group style="margin-right: 10px">
-                        <el-button type="default" size="small" @click="refreshEmojiTable" :icon="Refresh">
+                    <ButtonGroup style="margin-right: 10px">
+                        <Button variant="outline" size="sm" @click="refreshEmojiTable">
+                            <Refresh />
                             {{ t('dialog.gallery_icons.refresh') }}
-                        </el-button>
-                        <el-button
-                            type="default"
-                            size="small"
-                            @click="displayEmojiUpload"
-                            :icon="Upload"
-                            :disabled="!isLocalUserVrcPlusSupporter || isUploading">
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            :disabled="!isLocalUserVrcPlusSupporter || isUploading"
+                            @click="displayEmojiUpload">
+                            <Upload />
                             {{ t('dialog.gallery_icons.upload') }}
-                        </el-button>
-                    </el-button-group>
+                        </Button>
+                    </ButtonGroup>
                     <br />
                     <br />
                     <el-select v-model="emojiAnimationStyle">
@@ -318,19 +317,20 @@
                 <span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 1024x1024px (1:1)</span>
                 <br />
                 <br />
-                <el-button-group>
-                    <el-button type="default" size="small" @click="refreshStickerTable" :icon="Refresh">
+                <ButtonGroup>
+                    <Button variant="outline" size="sm" @click="refreshStickerTable">
+                        <Refresh />
                         {{ t('dialog.gallery_icons.refresh') }}
-                    </el-button>
-                    <el-button
-                        type="default"
-                        size="small"
-                        @click="displayStickerUpload"
-                        :icon="Upload"
-                        :disabled="!isLocalUserVrcPlusSupporter || isUploading">
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        :disabled="!isLocalUserVrcPlusSupporter || isUploading"
+                        @click="displayStickerUpload">
+                        <Upload />
                         {{ t('dialog.gallery_icons.upload') }}
-                    </el-button>
-                </el-button-group>
+                    </Button>
+                </ButtonGroup>
                 <br />
                 <div
                     class="x-friend-item"
@@ -383,19 +383,20 @@
                 <br />
                 <br />
                 <div style="display: flex; align-items: center">
-                    <el-button-group>
-                        <el-button type="default" size="small" @click="refreshPrintTable" :icon="Refresh">
+                    <ButtonGroup>
+                        <Button variant="outline" size="sm" @click="refreshPrintTable">
+                            <Refresh />
                             {{ t('dialog.gallery_icons.refresh') }}
-                        </el-button>
-                        <el-button
-                            type="default"
-                            size="small"
-                            @click="displayPrintUpload"
-                            :icon="Upload"
-                            :disabled="!isLocalUserVrcPlusSupporter || isUploading">
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            :disabled="!isLocalUserVrcPlusSupporter || isUploading"
+                            @click="displayPrintUpload">
+                            <Upload />
                             {{ t('dialog.gallery_icons.upload') }}
-                        </el-button>
-                    </el-button-group>
+                        </Button>
+                    </ButtonGroup>
                     <el-input
                         type="textarea"
                         v-model="printUploadNote"
@@ -472,14 +473,16 @@
                 <br />
                 <br />
                 <div style="display: flex; align-items: center">
-                    <el-button-group>
-                        <el-button type="default" size="small" @click="getInventory" :icon="Refresh">
+                    <ButtonGroup>
+                        <Button variant="outline" size="sm" @click="getInventory">
+                            <Refresh />
                             {{ t('dialog.gallery_icons.refresh') }}
-                        </el-button>
-                        <el-button type="default" size="small" @click="redeemReward" :icon="Present">
+                        </Button>
+                        <Button variant="outline" size="sm" @click="redeemReward">
+                            <Present />
                             {{ t('dialog.gallery_icons.redeem') }}
-                        </el-button>
-                    </el-button-group>
+                        </Button>
+                    </ButtonGroup>
                 </div>
                 <br />
                 <div
@@ -527,6 +530,8 @@
 <script setup>
     import { ArrowLeft, Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
     import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+    import { Button } from '@/components/ui/button';
+    import { ButtonGroup } from '@/components/ui/button-group';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';