replace some el-button

src/components/IconPicker.vue

@@ -1,10 +1,9 @@
 <template>
     <Popover v-model:open="visible">
         <PopoverTrigger asChild>
-            <el-button class="icon-picker__trigger" plain>
+            <Button>
-                <i v-if="modelValue" :class="modelValue"></i>
+                {{ t('nav_menu.icon_picker.pick_icon') }}
-                <span>{{ t('nav_menu.icon_picker.pick_icon') }}</span>
+            </Button>
-            </el-button>
         </PopoverTrigger>
         <PopoverContent side="bottom" align="start" class="w-155">
             <div class="icon-picker">
@@ -47,6 +46,7 @@
 
 <script setup>
     import { computed, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { useI18n } from 'vue-i18n';
 
     import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
@@ -145,14 +145,6 @@
 </script>
 
 <style scoped>
-    .icon-picker__trigger {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        min-width: 110px;
-        justify-content: center;
-    }
-
     .icon-picker__trigger i {
         font-size: 16px;
     }

src/components/InstanceInfo.vue

@@ -7,12 +7,12 @@
                         >Closed At: {{ formatDateFilter(props.instance.closedAt, 'long') }}<br
                     /></span>
                     <template v-if="state.canCloseInstance">
-                        <el-button
+                        <Button
+                            class="mt-1"
+                            size="sm"
                             :disabled="!!props.instance.closedAt"
-                            size="small"
-                            type="primary"
                             @click="closeInstance(props.location)">
-                            {{ t('dialog.user.info.close_instance') }} </el-button
+                            {{ t('dialog.user.info.close_instance') }} </Button
                         ><br /><br />
                     </template>
                     <span
@@ -64,6 +64,7 @@
 
 <script setup>
     import { reactive, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { CaretBottom } from '@element-plus/icons-vue';
     import { ElMessageBox } from 'element-plus';
     import { toast } from 'vue-sonner';

src/components/LastJoin.vue

@@ -4,14 +4,13 @@
             <template #content>
                 <span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
             </template>
-            <el-icon style="display: inline-block"><Location /></el-icon>
+            <i class="ri-history-line"></i>
         </TooltipWrapper>
     </span>
 </template>
 
 <script setup>
     import { ref, watch } from 'vue';
-    import { Location } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/components/Launch.vue

@@ -1,13 +1,19 @@
 <template>
     <div v-if="isVisible" class="inline-block">
         <TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')"
-            ><el-button @click="confirm" size="small" :icon="SwitchButton" circle />
+            ><Button
+                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                size="icon"
+                variant="outline"
+                @click="confirm"
+                ><i class="ri-login-box-line"></i
+            ></Button>
         </TooltipWrapper>
     </div>
 </template>
 
 <script setup>
-    import { SwitchButton } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue

@@ -68,15 +68,18 @@
         </template>
 
         <template #footer>
-            <el-button @click="closeSetAvatarStylesDialog">{{ t('dialog.set_avatar_styles.cancel') }}</el-button>
+            <Button variant="secondary" @click="closeSetAvatarStylesDialog">{{
-            <el-button type="primary" @click="saveSetAvatarStylesDialog">
+                t('dialog.set_avatar_styles.cancel')
+            }}</Button>
+            <Button @click="saveSetAvatarStylesDialog">
                 {{ t('dialog.set_avatar_styles.save') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { watch } from 'vue';

src/components/dialogs/ChooseFavoriteGroupDialog.vue

@@ -3,59 +3,68 @@
         <div v-loading="loading">
             <span style="display: block; text-align: center">{{ t('dialog.favorite.vrchat_favorites') }}</span>
             <template v-if="favoriteDialog.currentGroup && favoriteDialog.currentGroup.key">
-                <el-button
+                <Button
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    variant="outline"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="deleteFavoriteNoConfirm(favoriteDialog.objectId)">
-                    <el-icon style="margin-right: 5px"><Check /></el-icon>
+                    <Check />{{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
-                    {{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
                     {{ favoriteDialog.currentGroup.capacity }})
-                </el-button>
+                </Button>
             </template>
             <template v-else>
-                <el-button
+                <Button
+                    variant="outline"
                     v-for="group in groups"
                     :key="group.key"
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="addFavorite(group)">
                     {{ group.displayName }} ({{ group.count }} / {{ group.capacity }})
-                </el-button>
+                </Button>
             </template>
         </div>
         <div v-if="favoriteDialog.type === 'world'" style="margin-top: 20px">
             <span style="display: block; text-align: center">{{ t('dialog.favorite.local_favorites') }}</span>
             <template v-for="group in localWorldFavoriteGroups" :key="group">
-                <el-button
+                <Button
+                    variant="outline"
                     v-if="hasLocalWorldFavorite(favoriteDialog.objectId, group)"
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="removeLocalWorldFavorite(favoriteDialog.objectId, group)">
-                    <el-icon style="margin-right: 5px"><Check /></el-icon>
+                    <Check />{{ group }} ({{ localWorldFavGroupLength(group) }})
-                    {{ group }} ({{ localWorldFavGroupLength(group) }})
+                </Button>
-                </el-button>
+                <Button
-                <el-button
+                    variant="outline"
                     v-else
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="addLocalWorldFavorite(favoriteDialog.objectId, group)">
                     {{ group }} ({{ localWorldFavGroupLength(group) }})
-                </el-button>
+                </Button>
             </template>
         </div>
         <div v-if="favoriteDialog.type === 'avatar'" style="margin-top: 20px">
-            <span style="display: block; text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span>
+            <span style="text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span>
             <template v-for="group in localAvatarFavoriteGroups" :key="group">
-                <el-button
+                <Button
+                    variant="outline"
                     v-if="hasLocalAvatarFavorite(favoriteDialog.objectId, group)"
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="removeLocalAvatarFavorite(favoriteDialog.objectId, group)">
-                    <el-icon style="margin-right: 5px"><Check /></el-icon>
+                    <Check />{{ group }} ({{ localAvatarFavGroupLength(group) }})
-                    {{ group }} ({{ localAvatarFavGroupLength(group) }})
+                </Button>
-                </el-button>
+                <Button
-                <el-button
+                    variant="outline"
                     v-else
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     :disabled="!isLocalUserVrcPlusSupporter"
                     @click="addLocalAvatarFavorite(favoriteDialog.objectId, group)">
                     {{ group }} ({{ localAvatarFavGroupLength(group) }})
-                </el-button>
+                </Button>
             </template>
         </div>
     </el-dialog>
@@ -63,7 +72,8 @@
 
 <script setup>
     import { computed, nextTick, ref, watch } from 'vue';
-    import { Check } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { Check } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue

@@ -21,17 +21,18 @@
             style="margin-top: 10px"></el-input>
 
         <template #footer>
-            <el-button @click="cancelEditAndSendInvite">
+            <Button variant="secondary" @click="cancelEditAndSendInvite">
                 {{ t('dialog.edit_send_invite_message.cancel') }}
-            </el-button>
+            </Button>
-            <el-button type="primary" @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
+            <Button @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
                 {{ t('dialog.edit_send_invite_message.send') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/InviteDialog/InviteDialog.vue

@@ -9,22 +9,25 @@
         <div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
             <Location :location="inviteDialog.worldId" :link="false" />
             <br />
-            <el-button size="small" style="margin-top: 10px" @click="addSelfToInvite">{{
+            <Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
                 t('dialog.invite.add_self')
-            }}</el-button>
+            }}</Button>
-            <el-button
+            <Button
-                size="small"
+                size="sm"
+                class="mr-2"
+                variant="outline"
                 :disabled="inviteDialog.friendsInInstance.length === 0"
                 style="margin-top: 10px"
                 @click="addFriendsInInstanceToInvite"
-                >{{ t('dialog.invite.add_friends_in_instance') }}</el-button
+                >{{ t('dialog.invite.add_friends_in_instance') }}</Button
             >
-            <el-button
+            <Button
-                size="small"
+                size="sm"
+                variant="outline"
                 :disabled="vipFriends.length === 0"
                 style="margin-top: 10px"
                 @click="addFavoriteFriendsToInvite"
-                >{{ t('dialog.invite.add_favorite_friends') }}</el-button
+                >{{ t('dialog.invite.add_favorite_friends') }}</Button
             >
 
             <div style="width: 100%; margin-top: 15px">
@@ -61,15 +64,16 @@
         </div>
 
         <template #footer>
-            <el-button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="showSendInviteDialog">{{
+            <Button
-                t('dialog.invite.invite_with_message')
+                variant="secondary"
-            }}</el-button>
+                class="mr-2"
-            <el-button
-                type="primary"
                 :disabled="inviteDialog.loading || !inviteDialog.userIds.length"
-                @click="sendInvite"
+                @click="showSendInviteDialog"
-                >{{ t('dialog.invite.invite') }}</el-button
+                >{{ t('dialog.invite.invite_with_message') }}</Button
             >
+            <Button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite">{{
+                t('dialog.invite.invite')
+            }}</Button>
         </template>
         <SendInviteDialog
             v-model:sendInviteDialogVisible="sendInviteDialogVisible"
@@ -81,6 +85,7 @@
 
 <script setup>
     import { computed, ref } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';

src/components/dialogs/LaunchDialog.vue

@@ -8,20 +8,23 @@
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
                 <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <el-button
+                    <Button
-                        size="small"
+                        class="rounded-full ml-1"
-                        :icon="CopyDocument"
+                        size="icon-sm"
-                        style="margin-left: 5px"
+                        variant="ghost"
-                        circle
+                        @click="copyInstanceMessage(launchDialog.url)"
-                        @click="copyInstanceMessage(launchDialog.url)" />
+                        ><Copy
+                    /></Button>
                 </TooltipWrapper>
             </el-form-item>
             <el-form-item v-if="launchDialog.shortUrl">
                 <template #label>
-                    <span>{{ t('dialog.launch.short_url') }}</span>
+                    <div class="flex items-center">
-                    <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
+                        <span>{{ t('dialog.launch.short_url') }}</span>
-                        <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
+                        <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
-                    </TooltipWrapper>
+                            <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
+                        </TooltipWrapper>
+                    </div>
                 </template>
                 <el-input
                     v-model="launchDialog.shortUrl"
@@ -29,12 +32,13 @@
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
                 <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <el-button
+                    <Button
-                        size="small"
+                        class="rounded-full ml-1"
-                        :icon="CopyDocument"
+                        size="icon-sm"
-                        style="display: inline-block; margin-left: 5px"
+                        variant="ghost"
-                        circle
+                        @click="copyInstanceMessage(launchDialog.shortUrl)"
-                        @click="copyInstanceMessage(launchDialog.shortUrl)" />
+                        ><Copy
+                    /></Button>
                 </TooltipWrapper>
             </el-form-item>
             <el-form-item :label="t('dialog.launch.location')">
@@ -44,12 +48,13 @@
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
                 <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <el-button
+                    <Button
-                        size="small"
+                        class="rounded-full ml-1"
-                        :icon="CopyDocument"
+                        size="icon-sm"
-                        style="display: inline-block; margin-left: 5px"
+                        variant="ghost"
-                        circle
+                        @click="copyInstanceMessage(launchDialog.location)"
-                        @click="copyInstanceMessage(launchDialog.location)" />
+                        ><Copy
+                    /></Button>
                 </TooltipWrapper>
             </el-form-item>
         </el-form>
@@ -121,11 +126,12 @@
         DropdownMenuItem,
         DropdownMenuTrigger
     } from '@/components/ui/dropdown-menu';
-    import { CopyDocument, Warning } from '@element-plus/icons-vue';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
+    import { Copy } from 'lucide-vue-next';
     import { ElMessageBox } from 'element-plus';
     import { MoreHorizontal } from 'lucide-vue-next';
+    import { Warning } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/ModerateGroupDialog.vue

@@ -39,21 +39,21 @@
             </div>
         </div>
         <template #footer>
-            <el-button
+            <Button
-                type="primary"
                 :disabled="!moderateGroupDialog.userId || !moderateGroupDialog.groupId"
                 @click="
                     showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId);
                     moderateGroupDialog.visible = false;
                 ">
                 {{ t('dialog.moderate_group.moderation_tools') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { computed, nextTick, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/SendBoopDialog.vue

@@ -61,17 +61,22 @@
         </div>
 
         <template #footer>
-            <el-button size="small" @click="showGalleryPage">{{ t('dialog.boop_dialog.emoji_manager') }}</el-button>
+            <Button size="sm" variant="outline" class="mr-2" @click="showGalleryPage">{{
-            <el-button size="small" @click="closeDialog">{{ t('dialog.boop_dialog.cancel') }}</el-button>
+                t('dialog.boop_dialog.emoji_manager')
-            <el-button size="small" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
+            }}</Button>
+            <Button size="sm" variant="secondary" class="mr-2" @click="closeDialog">{{
+                t('dialog.boop_dialog.cancel')
+            }}</Button>
+            <Button size="sm" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
                 t('dialog.boop_dialog.send')
-            }}</el-button>
+            }}</Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { computed, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue

@@ -38,8 +38,8 @@
         </template>
         <template #footer>
             <div class="dialog-footer">
-                <el-button @click="cancel">Cancel</el-button>
+                <Button variant="secondary" @click="cancel">Cancel</Button>
-                <el-button type="primary" @click="saveChanges"> Confirm </el-button>
+                <Button @click="saveChanges"> Confirm </Button>
             </div>
         </template>
     </el-dialog>

src/components/dialogs/UserDialog/UserActionDropdown.vue

@@ -1,40 +1,29 @@
 <template>
-    <div style="flex: none">
+    <div style="flex: none" class="flex items-center">
         <template v-if="(currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite">
             <TooltipWrapper
                 v-if="userDialog.isFavorite"
                 side="top"
                 :content="t('dialog.user.actions.unfavorite_tooltip')">
-                <el-button
+                <Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
-                    type="warning"
-                    :icon="StarFilled"
-                    size="large"
-                    circle
-                    @click="userDialogCommand('Add Favorite')"></el-button>
             </TooltipWrapper>
             <TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
-                <el-button
+                <Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
-                    type="default"
+                    ><Star
-                    :icon="Star"
+                /></Button>
-                    size="large"
-                    circle
-                    @click="userDialogCommand('Add Favorite')"></el-button>
             </TooltipWrapper>
         </template>
         <DropdownMenu>
             <DropdownMenuTrigger as-child>
-                <el-button
+                <div class="ml-2">
-                    :type="
+                    <Button variant="outline" size="icon-lg" class="rounded-full">
-                        userDialog.incomingRequest || userDialog.outgoingRequest
+                        <Ellipsis />
-                            ? 'success'
+                        <span
-                            : userDialog.isBlock || userDialog.isMute
+                            v-if="dotClass"
-                              ? 'danger'
+                            class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-background"
-                              : 'default'
+                            :class="dotClass" />
-                    "
+                    </Button>
-                    :icon="MoreFilled"
+                </div>
-                    size="large"
-                    circle
-                    style="margin-left: 5px"></el-button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
                 <DropdownMenuItem @click="onCommand('Refresh')">
@@ -244,21 +233,20 @@
         Flag,
         Message,
         Microphone,
-        MoreFilled,
         Mute,
         Operation,
-        Picture,
         Plus,
         Pointer,
         Postcard,
         Refresh,
         Share,
-        Star,
-        StarFilled,
         SwitchButton,
         User,
         UserFilled
     } from '@element-plus/icons-vue';
+    import { MoreHorizontal as Ellipsis, Star } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
+    import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -285,6 +273,15 @@
     const { isGameRunning } = storeToRefs(useGameStore());
     const { lastLocation } = storeToRefs(useLocationStore());
 
+    const hasRequest = computed(() => userDialog.value.incomingRequest || userDialog.value.outgoingRequest);
+    const hasRisk = computed(() => userDialog.value.isBlock || userDialog.value.isMute);
+
+    const dotClass = computed(() => {
+        if (hasRequest.value) return 'bg-emerald-500';
+        if (hasRisk.value) return 'bg-destructive';
+        return null;
+    });
+
     function onCommand(command) {
         props.userDialogCommand(command);
     }

src/components/dialogs/VRCXUpdateDialog.vue

@@ -53,25 +53,26 @@
         </div>
 
         <template #footer>
-            <el-button v-if="updateInProgress" type="primary" @click="cancelUpdate">
+            <Button variant="secondary" class="mr-2" v-if="updateInProgress" @click="cancelUpdate">
                 {{ t('dialog.vrcx_updater.cancel') }}
-            </el-button>
+            </Button>
-            <el-button
+            <Button
+                variant="default"
                 v-if="VRCXUpdateDialog.release !== pendingVRCXInstall"
                 :disabled="updateInProgress"
-                type="primary"
                 @click="installVRCXUpdate">
                 {{ t('dialog.vrcx_updater.download') }}
-            </el-button>
+            </Button>
-            <el-button v-if="!updateInProgress && pendingVRCXInstall" type="primary" @click="restartVRCX(true)">
+            <Button variant="default" v-if="!updateInProgress && pendingVRCXInstall" @click="restartVRCX(true)">
                 {{ t('dialog.vrcx_updater.install') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { nextTick, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue

@@ -77,12 +77,12 @@
         </el-checkbox>
         <template #footer>
             <div style="display: flex">
-                <el-button @click="isVisible = false">
+                <Button variant="secondary" @click="isVisible = false">
                     {{ t('dialog.set_world_tags.cancel') }}
-                </el-button>
+                </Button>
-                <el-button type="primary" @click="saveSetWorldTagsDialog">
+                <Button @click="saveSetWorldTagsDialog">
                     {{ t('dialog.set_world_tags.save') }}
-                </el-button>
+                </Button>
             </div>
         </template>
     </el-dialog>
@@ -90,6 +90,7 @@
 
 <script setup>
     import { computed, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 

src/components/ui/button/Button.vue

@@ -1,6 +1,7 @@
 <script setup>
     import { Primitive } from 'reka-ui';
     import { cn } from '@/lib/utils';
+    import { computed } from 'vue';
 
     import { buttonVariants } from '.';
 
@@ -8,9 +9,12 @@
         variant: { type: null, required: false },
         size: { type: null, required: false },
         class: { type: null, required: false },
+        disabled: { type: Boolean, required: false },
         asChild: { type: Boolean, required: false },
         as: { type: null, required: false, default: 'button' }
     });
+
+    const isNativeButton = computed(() => props.as === 'button' && !props.asChild);
 </script>
 
 <template>
@@ -18,6 +22,9 @@
         data-slot="button"
         :as="as"
         :as-child="asChild"
+        :disabled="isNativeButton ? props.disabled : undefined"
+        :data-disabled="props.disabled ? '' : undefined"
+        :aria-disabled="props.disabled || undefined"
         :class="cn(buttonVariants({ variant, size }), props.class)">
         <slot />
     </Primitive>

src/components/ui/button/index.js

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
 export { default as Button } from './Button.vue';
 
 export const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     {
         variants: {
             variant: {

src/components/ui/spinner/Spinner.vue

@@ -0,0 +1,12 @@
+<script setup>
+    import { Loader2Icon } from 'lucide-vue-next';
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <Loader2Icon role="status" aria-label="Loading" :class="cn('size-4 animate-spin', props.class)" />
+</template>

src/components/ui/spinner/index.js

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

src/views/Charts/components/InstanceActivity.vue

@@ -21,15 +21,24 @@
             </div>
 
             <div>
-                <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top"
+                <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top">
-                    ><el-button :icon="Refresh" circle style="margin-right: 5px" @click="reloadData"></el-button
+                    <Button
-                ></TooltipWrapper>
+                        class="rounded-full"
+                        size="icon"
+                        variant="outline"
+                        style="margin-right: 5px"
+                        @click="reloadData">
+                        <RefreshCcw />
+                    </Button>
+                </TooltipWrapper>
 
                 <Popover>
                     <PopoverTrigger asChild>
                         <div>
                             <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
-                                <el-button :icon="Setting" style="margin-right: 5px" circle></el-button>
+                                <Button class="rounded-full" size="icon" variant="outline" style="margin-right: 5px">
+                                    <Settings />
+                                </Button>
                             </TooltipWrapper>
                         </div>
                     </PopoverTrigger>
@@ -132,7 +141,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 { ArrowLeft, ArrowRight, InfoFilled, WarningFilled } from '@element-plus/icons-vue';
+    import { RefreshCcw, Settings } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { storeToRefs } from 'pinia';

src/views/FriendsLocations/FriendsLocations.vue

@@ -13,9 +13,9 @@
                     <PopoverTrigger asChild>
                         <div>
                             <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
-                                <el-button style="margin-right: 5px" circle
+                                <Button class="rounded-full mr-2" size="icon" variant="outline">
-                                    ><i class="ri-settings-3-line"></i
+                                    <Settings />
-                                ></el-button>
+                                </Button>
                             </TooltipWrapper>
                         </div>
                     </PopoverTrigger>
@@ -164,6 +164,8 @@
 <script setup>
     import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { Loading, Search } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { Settings } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Login/Login.vue

@@ -1,16 +1,14 @@
 <template>
     <div style="float: left; margin: 5px; z-index: 3000">
         <TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
-            <el-button type="default" size="small" :icon="Download" circle @click="showVRCXUpdateDialog"></el-button>
+            <Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="showVRCXUpdateDialog"
+                ><CircleArrowDown
+            /></Button>
         </TooltipWrapper>
         <TooltipWrapper side="top" :content="t('view.login.proxy_settings')">
-            <el-button
+            <Button class="rounded-full text-xs" size="icon-sm" variant="ghost" @click="promptProxySettings"
-                type="default"
+                ><Route
-                size="small"
+            /></Button>
-                :icon="Connection"
-                style="margin-left: 5px"
-                circle
-                @click="promptProxySettings"></el-button>
         </TooltipWrapper>
     </div>
     <div v-loading="loginForm.loading" class="x-login-container">
@@ -79,16 +77,15 @@
                                 clearable></el-input>
                         </el-form-item>
                         <el-form-item>
-                            <el-button native-type="submit" type="primary" style="width: 100%">{{
+                            <Button type="submit" size="lg" style="width: 100%">{{ t('view.login.login') }}</Button>
-                                t('view.login.login')
-                            }}</el-button>
                         </el-form-item>
                     </el-form>
-                    <el-button
+                    <Button
-                        type="primary"
+                        variant="Secondary"
+                        size="lg"
                         style="width: 100%"
                         @click="openExternalLink('https://vrchat.com/register')"
-                        >{{ t('view.login.register') }}</el-button
+                        >{{ t('view.login.register') }}</Button
                     >
                 </div>
 
@@ -113,13 +110,14 @@
                                     <span class="extra" v-text="user.user.username"></span>
                                     <span class="extra" v-text="user.loginParams.endpoint"></span>
                                 </div>
-                                <el-button
+                                <Button
-                                    type="default"
+                                    class="rounded-full"
-                                    size="small"
+                                    size="icon-sm"
-                                    :icon="Delete"
+                                    variant="ghost"
                                     style="margin-left: 10px"
-                                    circle
+                                    @click.stop="clickDeleteSavedLogin(user.user.id)"
-                                    @click.stop="clickDeleteSavedLogin(user.user.id)"></el-button>
+                                    ><i class="ri-delete-bin-line h-3 w-3"></i
+                                ></Button>
                             </div>
                         </div>
                     </div>
@@ -149,8 +147,9 @@
 
 <script setup>
     import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
-    import { Connection, Delete, Download } from '@element-plus/icons-vue';
+    import { CircleArrowDown, Route } from 'lucide-vue-next';
     import { useRoute, useRouter } from 'vue-router';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/PlayerList/components/PhotonEventTable.vue

@@ -25,9 +25,9 @@
                 clearable
                 style="width: 150px"
                 @input="photonEventTableFilterChange"></el-input>
-            <el-button @click="emitShowChatboxBlacklist">{{
+            <Button variant="outline" @click="emitShowChatboxBlacklist">{{
                 t('view.player_list.photon.chatbox_blacklist')
-            }}</el-button>
+            }}</Button>
             <TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')">
                 <div style="display: inline-flex; align-items: center; font-size: 14px">
                     <span v-if="ipcEnabled && !photonEventIcon">🟢</span>
@@ -389,6 +389,7 @@
 
 <script setup>
     import { ArrowRight, Download } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue

@@ -14,18 +14,18 @@
                 style="margin-top: 5px"
                 @change="saveChatboxBlacklist">
                 <template #append>
-                    <el-button
+                    <Button
-                        :icon="Delete"
+                        variant="outline"
                         @click="
                             chatboxBlacklist.splice(index, 1);
                             saveChatboxBlacklist();
                         ">
-                    </el-button>
+                    </Button>
                 </template>
             </el-input>
-            <el-button size="small" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
+            <Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
                 {{ t('dialog.chatbox_blacklist.add_item') }}
-            </el-button>
+            </Button>
             <br />
             <h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
             <Badge
@@ -55,7 +55,7 @@
 </template>
 
 <script setup>
-    import { Delete } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Search/Search.vue

@@ -5,15 +5,13 @@
                 :model-value="searchText"
                 :placeholder="t('view.search.search_placeholder')"
                 style="flex: 1"
+                clearable
                 @input="updateSearchText"
                 @keyup.enter="search"></el-input>
             <TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
-                <el-button
+                <Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="handleClearSearch"
-                    type="default"
+                    ><Trash2
-                    :icon="Delete"
+                /></Button>
-                    circle
-                    style="flex: none; margin-left: 10px"
-                    @click="handleClearSearch"></el-button>
             </TooltipWrapper>
         </div>
         <el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''">
@@ -337,10 +335,11 @@
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-    import { Back, Delete, Refresh, Right } from '@element-plus/icons-vue';
+    import { Back, Refresh, Right } from '@element-plus/icons-vue';
     import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
+    import { Trash2 } from 'lucide-vue-next';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -374,7 +373,7 @@
     const { showUserDialog, refreshUserDialogAvatars } = useUserStore();
     const { showAvatarDialog, lookupAvatars, cachedAvatars } = useAvatarStore();
     const { cachedWorlds, showWorldDialog } = useWorldStore();
-    const { showGroupDialog, applyGroup } = useGroupStore();
+    const { showGroupDialog } = useGroupStore();
     const { searchText, searchUserResults } = storeToRefs(useSearchStore());
     const { clearSearch, moreSearchUser } = useSearchStore();
     const { cachedConfig } = storeToRefs(useAuthStore());

src/views/Settings/components/PhotonSettings.vue

@@ -35,9 +35,9 @@
             </ToggleGroup>
         </div>
         <div class="options-container-item">
-            <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
+            <Button size="sm" variant="outline" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
                 t('view.settings.advanced.photon.event_hud.message_timeout')
-            }}</el-button>
+            }}</Button>
         </div>
         <div class="options-container-item">
             <Select
@@ -92,15 +92,15 @@
             </ToggleGroup>
         </div>
         <div class="options-container-item">
-            <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
+            <Button size="sm" variant="outline" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
                 t('view.settings.advanced.photon.timeout_hud.timeout_threshold')
-            }}</el-button>
+            }}</Button>
         </div>
     </div>
 </template>
 
 <script setup>
-    import { Timer } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Settings/dialogs/ChangelogDialog.vue

@@ -21,20 +21,24 @@
                 style="height: 62vh; overflow-y: auto; margin-top: 10px" />
         </div>
         <template #footer>
-            <el-button @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
+            <Button
+                variant="ghost"
+                class="mr-2"
+                @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
                 {{ t('dialog.change_log.github') }}
-            </el-button>
+            </Button>
-            <el-button @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
+            <Button variant="outline" class="mr-2" @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
                 {{ t('dialog.change_log.donate') }}
-            </el-button>
+            </Button>
-            <el-button @click="closeDialog">
+            <Button @click="closeDialog">
                 {{ t('dialog.change_log.close') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { defineAsyncComponent } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';

src/views/Settings/dialogs/LaunchOptionsDialog.vue

@@ -38,16 +38,23 @@
         </template>
 
         <template #footer>
-            <div style="display: flex">
+            <div class="flex items-center justify-between">
-                <el-button @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
+                <div>
-                    {{ t('dialog.launch_options.vrchat_docs') }}
+                    <Button
-                </el-button>
+                        variant="outline"
-                <el-button @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
+                        class="mr-2"
-                    {{ t('dialog.launch_options.unity_manual') }}
+                        @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
-                </el-button>
+                        {{ t('dialog.launch_options.vrchat_docs') }}
-                <el-button type="primary" style="margin-left: auto" @click="updateLaunchOptions">
+                    </Button>
+                    <Button
+                        variant="outline"
+                        @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
+                        {{ t('dialog.launch_options.unity_manual') }}
+                    </Button>
+                </div>
+                <Button @click="updateLaunchOptions">
                     {{ t('dialog.launch_options.save') }}
-                </el-button>
+                </Button>
             </div>
         </template>
     </el-dialog>
@@ -55,6 +62,7 @@
 
 <script setup>
     import { computed, ref } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/views/Settings/dialogs/NotificationPositionDialog.vue

@@ -78,15 +78,16 @@
 
         <template #footer>
             <div style="display: flex">
-                <el-button type="primary" style="margin-left: auto" @click="closeDialog">
+                <Button @click="closeDialog">
                     {{ t('dialog.notification_position.ok') }}
-                </el-button>
+                </Button>
             </div>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Settings/dialogs/PrimaryPasswordDialog.vue

@@ -25,20 +25,20 @@
             show-password>
         </el-input>
         <template #footer>
-            <el-button
+            <Button
-                type="primary"
                 :disabled="
                     enablePrimaryPasswordDialog.password.length === 0 ||
                     enablePrimaryPasswordDialog.password !== enablePrimaryPasswordDialog.rePassword
                 "
                 @click="handleSetPrimaryPassword()">
                 {{ t('dialog.primary_password.ok') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Settings/dialogs/TranslationApiDialog.vue

@@ -86,11 +86,9 @@
         </template>
 
         <template #footer>
-            <div style="display: flex">
+            <div class="flex items-center justify-between">
-                <el-button v-if="form.translationApiType === 'openai'" @click="testOpenAiTranslation" plain>
+                <Button
-                    {{ t('dialog.translation_api.test') }}
+                    variant="outline"
-                </el-button>
-                <el-button
                     v-if="form.translationApiType === 'google'"
                     @click="
                         openExternalLink(
@@ -98,10 +96,19 @@
                         )
                     ">
                     {{ t('dialog.translation_api.guide') }}
-                </el-button>
+                </Button>
-                <el-button type="primary" style="margin-left: auto" @click="saveTranslationApiConfig">
+                <div>
-                    {{ t('dialog.translation_api.save') }}
+                    <Button
-                </el-button>
+                        variant="secondary"
+                        class="mr-2"
+                        v-if="form.translationApiType === 'openai'"
+                        @click="testOpenAiTranslation">
+                        {{ t('dialog.translation_api.test') }}
+                    </Button>
+                    <Button style="margin-left: auto" @click="saveTranslationApiConfig">
+                        {{ t('dialog.translation_api.save') }}
+                    </Button>
+                </div>
             </div>
         </template>
     </el-dialog>
@@ -110,6 +117,7 @@
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { reactive, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/views/Settings/dialogs/YouTubeApiDialog.vue

@@ -17,19 +17,20 @@
         </el-input>
 
         <template #footer>
-            <div style="display: flex">
+            <div class="flex items-center justify-between">
-                <el-button @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
+                <Button variant="outline" @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
                     {{ t('dialog.youtube_api.guide') }}
-                </el-button>
+                </Button>
-                <el-button type="primary" style="margin-left: auto" @click="testYouTubeApiKey">
+                <Button style="margin-left: auto" @click="testYouTubeApiKey">
                     {{ t('dialog.youtube_api.save') }}
-                </el-button>
+                </Button>
             </div>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/views/Sidebar/components/FriendItem.vue

@@ -38,13 +38,13 @@
         </template>
         <template v-else-if="!friend.ref && !isRefreshFriendsLoading">
             <span>{{ friend.name || friend.id }}</span>
-            <el-button
+            <Button
-                text
+                size="sm"
-                :icon="Close"
+                variant="ghost"
-                size="small"
+                class="mr-1 w-6 h-6 text-xs"
-                style="margin-left: 5px"
+                @click.stop="$emit('confirm-delete-friend', friend.id)"
-                @click.stop="$emit('confirm-delete-friend', friend.id)">
+                ><i class="ri-delete-bin-2-line"></i>
-            </el-button>
+            </Button>
         </template>
 
         <el-skeleton v-else animated class="skeleton" :throttle="100">
@@ -62,7 +62,8 @@
 </template>
 
 <script setup>
-    import { Close, Loading, WarningFilled } from '@element-plus/icons-vue';
+    import { Loading, WarningFilled } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';

src/views/Tools/dialogs/EditInviteMessageDialog.vue

@@ -18,16 +18,15 @@
                 style="margin-top: 10px"></el-input>
         </div>
         <template #footer>
-            <el-button @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</el-button>
+            <Button variant="secondary" @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</Button>
-            <el-button type="primary" @click="saveEditInviteMessage">{{
+            <Button @click="saveEditInviteMessage">{{ t('dialog.edit_invite_message.save') }}</Button>
-                t('dialog.edit_invite_message.save')
-            }}</el-button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';