From f819a3f5005dccdfeb3b8778feb2cca4b8d652b1 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Wed, 7 Jan 2026 17:41:33 +0900
Subject: [PATCH] replace el-tag with Badge

---
 src/app.css                                   |  22 +---
 .../dialogs/AvatarDialog/AvatarDialog.vue     | 114 +++++++----------
 src/components/dialogs/CustomNavDialog.vue    |   7 +-
 .../dialogs/GroupDialog/GroupDialog.vue       | 117 +++++++-----------
 .../GroupMemberModerationDialog.vue           |  27 ++--
 .../dialogs/UserDialog/LanguageDialog.vue     |  26 ++--
 .../dialogs/UserDialog/UserSummaryHeader.vue  | 101 +++++----------
 .../dialogs/WorldDialog/WorldDialog.vue       |  89 +++++--------
 src/components/ui/badge/Badge.vue             |   7 +-
 src/views/Favorites/FavoritesAvatar.vue       |  18 +--
 src/views/Favorites/FavoritesFriend.vue       |  18 +--
 src/views/Favorites/FavoritesWorld.vue        |  18 +--
 src/views/PlayerList/PlayerList.vue           |  84 ++++---------
 .../dialogs/ChatboxBlacklistDialog.vue        |  28 +++--
 .../Settings/dialogs/LaunchOptionsDialog.vue  |   5 +-
 .../dialogs/ScreenshotMetadataDialog.vue      |   5 +-
 16 files changed, 272 insertions(+), 414 deletions(-)

diff --git a/src/app.css b/src/app.css
index e2a6f9de..ac922757 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1262,16 +1262,6 @@ i.x-status-icon.red {
     background: #ff2c2c;
 }
 
-.x-tag-friend {
-    color: var(--color-amber-400);
-    border-color: var(--color-amber-400) !important;
-}
-
-.x-tag-mutual-friend {
-    color: var(--el-color-success);
-    border-color: var(--el-color-success) !important;
-}
-
 .x-tag-platform-pc {
     color: #0078d4;
     border-color: #0078d4 !important;
@@ -1282,14 +1272,14 @@ i.x-status-icon.red {
     border-color: #3ddc84 !important;
 }
 
-.x-tag-platform-ios {
-    color: #c7c7ce;
-    border-color: #c7c7ce !important;
+.x-tag-friend {
+    color: var(--color-amber-400);
+    border-color: var(--color-amber-400) !important;
 }
 
-.x-tag-platform-other {
-    color: var(--el-color-danger);
-    border-color: var(--el-color-danger) !important;
+.x-tag-mutual-friend {
+    color: var(--el-color-success);
+    border-color: var(--el-color-success) !important;
 }
 
 .x-tag-age-verification {
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 912f18d1..467cd62f 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -31,28 +31,19 @@
                                 v-text="avatarDialog.ref.authorName"></span>
                         </div>
                         <div>
-                            <el-tag
+                            <Badge
                                 v-if="avatarDialog.ref.releaseStatus === 'public'"
-                                type="success"
-                                effect="plain"
-                                size="small"
-                                style="margin-right: 5px; margin-top: 5px"
-                                >{{ t('dialog.avatar.tags.public') }}</el-tag
-                            >
-                            <el-tag
-                                v-else
-                                type="danger"
-                                effect="plain"
-                                size="small"
-                                style="margin-right: 5px; margin-top: 5px"
-                                >{{ t('dialog.avatar.tags.private') }}</el-tag
-                            >
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.avatar.tags.public') }}
+                            </Badge>
+                            <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.avatar.tags.private') }}
+                            </Badge>
                             <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
-                                <el-tag
+                                <Badge
                                     class="x-tag-platform-pc"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px"
                                     ><i class="ri-computer-line"></i>
                                     <span
@@ -65,14 +56,12 @@
                                         :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
                                         >{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
                                     >
-                                </el-tag>
+                                </Badge>
                             </TooltipWrapper>
                             <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
-                                <el-tag
+                                <Badge
                                     class="x-tag-platform-quest"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px"
                                     ><i class="ri-android-line"></i>
                                     <span
@@ -85,14 +74,12 @@
                                         :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
                                         >{{ avatarDialog.bundleSizes['android'].fileSize }}</span
                                     >
-                                </el-tag>
+                                </Badge>
                             </TooltipWrapper>
                             <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
-                                <el-tag
+                                <Badge
                                     class="x-tag-platform-ios"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px"
                                     ><i class="ri-apple-line"></i>
                                     <span
@@ -105,24 +92,20 @@
                                         :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
                                         >{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
                                     >
-                                </el-tag>
+                                </Badge>
                             </TooltipWrapper>
-                            <el-tag
+                            <Badge
                                 v-if="avatarDialog.inCache"
+                                variant="outline"
                                 class="x-link"
-                                type="info"
-                                effect="plain"
-                                size="small"
                                 style="margin-right: 5px; margin-top: 5px"
                                 @click="openFolderGeneric(avatarDialog.cachePath)">
                                 <span v-text="avatarDialog.cacheSize"></span>
                                 &nbsp;{{ t('dialog.avatar.tags.cache') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
-                                type="info"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px"
                                 >Styles
                                 <span v-if="avatarDialog.ref.styles.primary" :class="['x-grey', 'x-tag-border-left']">{{
@@ -133,40 +116,33 @@
                                     :class="['x-grey', 'x-tag-border-left']"
                                     >{{ avatarDialog.ref.styles.secondary }}</span
                                 >
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="avatarDialog.isQuestFallback"
-                                type="info"
-                                effect="plain"
-                                size="small"
-                                style="margin-right: 5px; margin-top: 5px"
-                                >{{ t('dialog.avatar.tags.fallback') }}</el-tag
-                            >
-                            <el-tag
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.avatar.tags.fallback') }}
+                            </Badge>
+                            <Badge
                                 v-if="avatarDialog.hasImposter"
-                                type="info"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px"
                                 >{{ t('dialog.avatar.tags.impostor') }}
                                 <span v-if="avatarDialog.imposterVersion" :class="['x-grey', 'x-tag-border-left']"
                                     >v{{ avatarDialog.imposterVersion }}</span
                                 >
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="avatarDialog.ref.unityPackageUrl"
-                                type="success"
-                                effect="plain"
-                                size="small"
-                                style="margin-right: 5px; margin-top: 5px"
-                                >{{ t('dialog.avatar.tags.future_proofing') }}</el-tag
-                            >
+                                variant="outline"
+                                style="margin-right: 5px; margin-top: 5px">
+                                {{ t('dialog.avatar.tags.future_proofing') }}
+                            </Badge>
                             <div>
                                 <template v-for="tag in avatarDialog.ref.tags" :key="tag">
-                                    <el-tag
+                                    <Badge
                                         v-if="tag.startsWith('content_')"
-                                        effect="plain"
-                                        size="small"
+                                        variant="outline"
                                         style="margin-right: 5px; margin-top: 5px">
                                         <span v-if="tag === 'content_horror'">{{
                                             t('dialog.avatar.tags.content_horror')
@@ -184,16 +160,15 @@
                                             t('dialog.avatar.tags.content_sex')
                                         }}</span>
                                         <span v-else>{{ tag.replace('content_', '') }}</span>
-                                    </el-tag>
-                                    <el-tag
+                                    </Badge>
+                                    <Badge
                                         v-if="tag.startsWith('author_tag_')"
-                                        effect="plain"
-                                        size="small"
+                                        variant="outline"
                                         style="margin-right: 5px; margin-top: 5px">
                                         <span>
                                             {{ tag.replace('author_tag_', '') }}
                                         </span>
-                                    </el-tag>
+                                    </Badge>
                                 </template>
                             </div>
                         </div>
@@ -507,8 +482,8 @@
                                 <span class="name"
                                     >{{ t('dialog.avatar.info.time_spent')
                                     }}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
-                                        <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                    </TooltipWrapper></span>
+                                        <el-icon style="margin-left: 3px"><Warning /></el-icon> </TooltipWrapper
+                                ></span>
 
                                 <span v-if="timeSpent === 0" class="extra">-</span>
                                 <span v-else class="extra">{{ timeToText(timeSpent) }}</span>
@@ -612,6 +587,7 @@
     import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores';
     import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
     import { AppDebug } from '../../../service/appConfig.js';
+    import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
diff --git a/src/components/dialogs/CustomNavDialog.vue b/src/components/dialogs/CustomNavDialog.vue
index 697a442a..719aebfe 100644
--- a/src/components/dialogs/CustomNavDialog.vue
+++ b/src/components/dialogs/CustomNavDialog.vue
@@ -62,13 +62,13 @@
                     </div>
                     <div class="custom-nav-entry__folder-items">
                         <template v-if="entry.items?.length">
-                            <el-tag
+                            <Badge
                                 v-for="key in entry.items"
                                 :key="`${entry.id}-${key}`"
-                                size="small"
+                                variant="outline"
                                 class="custom-nav-entry__folder-tag">
                                 {{ t(definitionsMap.get(key)?.labelKey || key) }}
-                            </el-tag>
+                            </Badge>
                         </template>
                         <span v-else class="custom-nav-entry__folder-empty">
                             {{ t('nav_menu.custom_nav.folder_empty') }}
@@ -205,6 +205,7 @@
 
     import dayjs from 'dayjs';
 
+    import { Badge } from '../ui/badge';
     import { navDefinitions } from '../../shared/constants/ui.js';
 
     import IconPicker from '../IconPicker.vue';
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 5c7352fa..a7907f06 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -44,111 +44,85 @@
                                 v-text="groupDialog.ownerDisplayName"></span>
                         </div>
                         <div class="group-tags">
-                            <el-tag
+                            <Badge
                                 v-if="groupDialog.ref.isVerified"
-                                type="info"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.verified') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="groupDialog.ref.privacy === 'private'"
-                                type="danger"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.private') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="groupDialog.ref.privacy === 'default'"
-                                type="success"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.public') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="groupDialog.ref.joinState === 'open'"
-                                type="success"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.open') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-else-if="groupDialog.ref.joinState === 'request'"
-                                type="warning"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.request') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-else-if="groupDialog.ref.joinState === 'invite'"
-                                type="danger"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.invite') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-else-if="groupDialog.ref.joinState === 'closed'"
-                                type="danger"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.closed') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="groupDialog.inGroup"
-                                type="info"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.joined') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
-                                type="danger"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.group.tags.banned') }}
-                            </el-tag>
+                            </Badge>
                             <template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
-                                <el-tag
+                                <Badge
                                     v-if="groupDialog.ref.myMember.visibility === 'visible'"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
                                     {{ t('dialog.group.tags.visible') }}
-                                </el-tag>
-                                <el-tag
+                                </Badge>
+                                <Badge
                                     v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
                                     {{ t('dialog.group.tags.friends') }}
-                                </el-tag>
-                                <el-tag
+                                </Badge>
+                                <Badge
                                     v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
                                     {{ t('dialog.group.tags.hidden') }}
-                                </el-tag>
-                                <el-tag
+                                </Badge>
+                                <Badge
                                     v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
                                     {{ t('dialog.group.tags.subscribed') }}
-                                </el-tag>
+                                </Badge>
                             </template>
                         </div>
                         <div style="margin-top: 5px">
@@ -192,9 +166,7 @@
                             </TooltipWrapper>
                         </template>
                         <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
-                            <TooltipWrapper
-                                side="top"
-                                :content="t('dialog.group.actions.cancel_join_request_tooltip')">
+                            <TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
                                 <span>
                                     <el-button
                                         type="default"
@@ -649,8 +621,8 @@
                                             :icon="CopyDocument"
                                             circle
                                             style="margin-left: 5px"
-                                            @click="copyToClipboard(groupDialog.ref.$url)" />
-                                    </TooltipWrapper></span>
+                                            @click="copyToClipboard(groupDialog.ref.$url)" /> </TooltipWrapper
+                                ></span>
                             </div>
                         </div>
                         <div class="x-friend-item" style="width: 350px; cursor: default">
@@ -665,8 +637,8 @@
                                             :icon="CopyDocument"
                                             circle
                                             style="margin-left: 5px"
-                                            @click="copyToClipboard(groupDialog.id)" />
-                                    </TooltipWrapper></span>
+                                            @click="copyToClipboard(groupDialog.id)" /> </TooltipWrapper
+                                ></span>
                             </div>
                         </div>
                         <div
@@ -1205,6 +1177,7 @@
     } from '../../../shared/utils';
     import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
+    import { Badge } from '../../ui/badge';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
     import { groupRequest } from '../../../api';
 
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 75932b1c..a16db9d2 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -723,14 +723,11 @@
                 style="margin-left: 5px"
                 @click="clearSelectedGroupMembers"></el-button>
             <br />
-            <el-tag
+            <Badge
                 v-for="user in selectedUsersArray"
                 :key="user.id"
-                type="info"
-                :disable-transitions="true"
-                style="margin-right: 5px; margin-top: 5px"
-                closable
-                @close="deleteSelectedGroupMember(user)">
+                variant="outline"
+                style="margin-right: 5px; margin-top: 5px">
                 <TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
                     <template #content>
                         <span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
@@ -738,7 +735,22 @@
                     <el-icon style="margin-left: 3px; display: inline-block"><Warning /></el-icon>
                 </TooltipWrapper>
                 <span v-text="user.user?.displayName || user.userId" style="font-weight: bold; margin-left: 5px"></span>
-            </el-tag>
+                <button
+                    type="button"
+                    style="
+                        margin-left: 6px;
+                        border: none;
+                        background: transparent;
+                        padding: 0;
+                        display: inline-flex;
+                        align-items: center;
+                        color: inherit;
+                        cursor: pointer;
+                    "
+                    @click="deleteSelectedGroupMember(user)">
+                    <i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
+                </button>
+            </Badge>
             <br />
             <br />
             <span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
@@ -860,6 +872,7 @@
     import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores';
     import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
     import { groupRequest, userRequest } from '../../../api';
+    import { Badge } from '../../ui/badge';
 
     import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';
 
diff --git a/src/components/dialogs/UserDialog/LanguageDialog.vue b/src/components/dialogs/UserDialog/LanguageDialog.vue
index 21c568eb..0bbc7f40 100644
--- a/src/components/dialogs/UserDialog/LanguageDialog.vue
+++ b/src/components/dialogs/UserDialog/LanguageDialog.vue
@@ -7,19 +7,28 @@
         append-to-body>
         <div v-loading="languageDialog.loading">
             <div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
-                <el-tag
-                    size="small"
-                    type="info"
-                    effect="plain"
-                    closable
-                    style="margin-right: 5px"
-                    @close="removeUserLanguage(item.key)">
+                <Badge variant="outline" style="margin-right: 5px">
                     <span
                         class="flags"
                         :class="languageClass(item.key)"
                         style="display: inline-block; margin-right: 5px"></span>
                     {{ item.value }} ({{ item.key.toUpperCase() }})
-                </el-tag>
+                    <button
+                        type="button"
+                        style="
+                            margin-left: 6px;
+                            border: none;
+                            background: transparent;
+                            padding: 0;
+                            display: inline-flex;
+                            align-items: center;
+                            color: inherit;
+                            cursor: pointer;
+                        "
+                        @click="removeUserLanguage(item.key)">
+                        <i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
+                    </button>
+                </Badge>
             </div>
             <el-select
                 :disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)"
@@ -46,6 +55,7 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
+    import { Badge } from '../../ui/badge';
     import { languageClass } from '../../../shared/utils';
     import { useUserStore } from '../../../stores';
     import { userRequest } from '../../../api';
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index 23d204df..d9413ecf 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -74,24 +74,20 @@
                 </div>
                 <div style="margin-top: 5px" v-show="!userDialog.loading">
                     <TooltipWrapper side="top" :content="t('dialog.user.tags.trust_level')">
-                        <el-tag
-                            type="info"
-                            effect="plain"
-                            size="small"
+                        <Badge
+                            variant="outline"
                             class="name"
                             :class="userDialog.ref.$trustClass"
                             style="margin-right: 5px; margin-top: 5px">
                             <i class="ri-shield-line"></i> {{ userDialog.ref.$trustLevel }}
-                        </el-tag>
+                        </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper
                         v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
                         side="top"
                         :content="t('dialog.user.tags.age_verified')">
-                        <el-tag
-                            type="info"
-                            effect="plain"
-                            size="small"
+                        <Badge
+                            variant="outline"
                             class="x-tag-age-verification"
                             style="margin-right: 5px; margin-top: 5px">
                             <template v-if="userDialog.ref.ageVerificationStatus === '18+'">
@@ -100,116 +96,84 @@
                             <template v-else>
                                 <i class="ri-info-card-line"></i>
                             </template>
-                        </el-tag>
+                        </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper
                         v-if="userDialog.isFriend && userDialog.friend"
                         side="top"
                         :content="t('dialog.user.tags.friend_number')">
-                        <el-tag
-                            type="info"
-                            effect="plain"
-                            size="small"
-                            class="x-tag-friend"
-                            style="margin-right: 5px; margin-top: 5px">
+                        <Badge variant="outline" class="x-tag-friend" style="margin-right: 5px; margin-top: 5px">
                             <i class="ri-user-add-line"></i>
                             {{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
-                        </el-tag>
+                        </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper
                         v-if="userDialog.mutualFriendCount"
                         side="top"
                         :content="t('dialog.user.tags.mutual_friends')">
-                        <el-tag
-                            type="info"
-                            effect="plain"
-                            size="small"
-                            class="x-tag-mutual-friend"
-                            style="margin-right: 5px; margin-top: 5px">
+                        <Badge variant="outline" class="x-tag-mutual-friend" style="margin-right: 5px; margin-top: 5px">
                             <i class="ri-group-line"></i>
                             {{ userDialog.mutualFriendCount }}
-                        </el-tag>
+                        </Badge>
                     </TooltipWrapper>
-                    <el-tag
+                    <Badge
                         v-if="userDialog.ref.$isTroll"
-                        type="info"
-                        effect="plain"
-                        size="small"
+                        variant="outline"
                         class="x-tag-troll"
                         style="margin-right: 5px; margin-top: 5px">
                         Nuisance
-                    </el-tag>
-                    <el-tag
+                    </Badge>
+                    <Badge
                         v-if="userDialog.ref.$isProbableTroll"
-                        type="info"
-                        effect="plain"
-                        size="small"
+                        variant="outline"
                         class="x-tag-troll"
                         style="margin-right: 5px; margin-top: 5px">
                         Almost Nuisance
-                    </el-tag>
-                    <el-tag
+                    </Badge>
+                    <Badge
                         v-if="userDialog.ref.$isModerator"
-                        type="info"
-                        effect="plain"
-                        size="small"
+                        variant="outline"
                         class="x-tag-vip"
                         style="margin-right: 5px; margin-top: 5px">
                         {{ t('dialog.user.tags.vrchat_team') }}
-                    </el-tag>
+                    </Badge>
 
                     <TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
-                        <el-tag
-                            type="info"
-                            effect="plain"
-                            size="small"
-                            class="x-tag-platform-pc"
-                            style="margin-right: 5px; margin-top: 5px">
+                        <Badge variant="outline" class="x-tag-platform-pc" style="margin-right: 5px; margin-top: 5px">
                             <i class="ri-computer-line"></i>
-                        </el-tag>
+                        </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
-                        <el-tag
-                            type="info"
-                            effect="plain"
-                            size="small"
+                        <Badge
+                            variant="outline"
                             class="x-tag-platform-quest"
                             style="margin-right: 5px; margin-top: 5px">
                             <i class="ri-android-line"></i>
-                        </el-tag>
+                        </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
-                        <el-tag
-                            type="info"
-                            effect="plain"
-                            size="small"
-                            class="x-tag-platform-ios"
-                            style="margin-right: 5px; margin-top: 5px"
+                        <Badge variant="outline" class="x-tag-platform-ios" style="margin-right: 5px; margin-top: 5px"
                             ><i class="ri-apple-line"></i
-                        ></el-tag>
+                        ></Badge>
                     </TooltipWrapper>
-                    <el-tag
+                    <Badge
                         v-else-if="userDialog.ref.$platform"
-                        type="info"
-                        effect="plain"
-                        size="small"
+                        variant="outline"
                         class="x-tag-platform-other"
                         style="margin-right: 5px; margin-top: 5px">
                         {{ userDialog.ref.$platform }}
-                    </el-tag>
+                    </Badge>
 
-                    <el-tag
+                    <Badge
                         v-if="userDialog.ref.$customTag"
-                        type="info"
-                        effect="plain"
-                        size="small"
+                        variant="outline"
                         class="name"
                         :style="{
                             color: userDialog.ref.$customTagColour,
                             'border-color': userDialog.ref.$customTagColour
                         }"
                         style="margin-right: 5px; margin-top: 5px"
-                        >{{ userDialog.ref.$customTag }}</el-tag
+                        >{{ userDialog.ref.$customTag }}</Badge
                     >
                     <br />
                     <TooltipWrapper v-for="badge in userDialog.ref.badges" :key="badge.badgeId" side="top">
@@ -297,6 +261,7 @@
 
     import { formatDateFilter, languageClass, userImage, userStatusClass } from '../../../shared/utils';
     import { useGalleryStore, useUserStore } from '../../../stores';
+    import { Badge } from '../../ui/badge';
 
     import UserActionDropdown from './UserActionDropdown.vue';
 
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index ce986257..f22f3617 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -40,36 +40,25 @@
                                 v-text="worldDialog.ref.authorName" />
                         </div>
                         <div>
-                            <el-tag
+                            <Badge
                                 v-if="worldDialog.ref.$isLabs"
-                                type="primary"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.world.tags.labs') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-else-if="worldDialog.ref.releaseStatus === 'public'"
-                                type="success"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.world.tags.public') }}
-                            </el-tag>
-                            <el-tag
-                                v-else
-                                type="danger"
-                                effect="plain"
-                                size="small"
-                                style="margin-right: 5px; margin-top: 5px">
+                            </Badge>
+                            <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.world.tags.private') }}
-                            </el-tag>
+                            </Badge>
                             <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
-                                <el-tag
+                                <Badge
                                     class="x-tag-platform-pc"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
                                     <i class="ri-computer-line"></i
                                     ><span
@@ -77,15 +66,13 @@
                                         :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
                                         {{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
                                     </span>
-                                </el-tag>
+                                </Badge>
                             </TooltipWrapper>
 
                             <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
-                                <el-tag
+                                <Badge
                                     class="x-tag-platform-quest"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
                                     <i class="ri-android-line"></i
                                     ><span
@@ -93,15 +80,13 @@
                                         :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
                                         {{ worldDialog.bundleSizes['android'].fileSize }}
                                     </span>
-                                </el-tag>
+                                </Badge>
                             </TooltipWrapper>
 
                             <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
-                                <el-tag
+                                <Badge
                                     class="x-tag-platform-ios"
-                                    type="info"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
                                     <i class="ri-apple-line"></i
                                     ><span
@@ -109,51 +94,42 @@
                                         :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']">
                                         {{ worldDialog.bundleSizes['ios'].fileSize }}
                                     </span>
-                                </el-tag>
+                                </Badge>
                             </TooltipWrapper>
 
-                            <el-tag
+                            <Badge
                                 v-if="worldDialog.avatarScalingDisabled"
-                                type="warning"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.world.tags.avatar_scaling_disabled') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="worldDialog.focusViewDisabled"
-                                type="warning"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.world.tags.focus_view_disabled') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="worldDialog.ref.unityPackageUrl"
-                                type="success"
-                                effect="plain"
-                                size="small"
+                                variant="outline"
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.world.tags.future_proofing') }}
-                            </el-tag>
-                            <el-tag
+                            </Badge>
+                            <Badge
                                 v-if="worldDialog.inCache"
+                                variant="outline"
                                 class="x-link"
-                                type="info"
-                                effect="plain"
-                                size="small"
                                 style="margin-right: 5px; margin-top: 5px"
                                 @click="openFolderGeneric(worldDialog.cachePath)">
                                 <span v-text="worldDialog.cacheSize" />
                                 | {{ t('dialog.world.tags.cache') }}
-                            </el-tag>
+                            </Badge>
                         </div>
                         <div>
                             <template v-for="tag in worldDialog.ref.tags" :key="tag">
-                                <el-tag
+                                <Badge
                                     v-if="tag.startsWith('content_')"
-                                    effect="plain"
-                                    size="small"
+                                    variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
                                     <span v-if="tag === 'content_horror'">
                                         {{ t('dialog.world.tags.content_horror') }}
@@ -173,7 +149,7 @@
                                     <span v-else>
                                         {{ tag.replace('content_', '') }}
                                     </span>
-                                </el-tag>
+                                </Badge>
                             </template>
                         </div>
                         <div style="margin-top: 5px">
@@ -804,6 +780,7 @@
         useWorldStore
     } from '../../../stores';
     import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
+    import { Badge } from '../../ui/badge';
     import { database } from '../../../service/database.js';
     import { getNextDialogIndex } from '../../../shared/utils/base/ui';
 
diff --git a/src/components/ui/badge/Badge.vue b/src/components/ui/badge/Badge.vue
index a7ab2cca..37b1cdae 100644
--- a/src/components/ui/badge/Badge.vue
+++ b/src/components/ui/badge/Badge.vue
@@ -2,6 +2,7 @@
     import { Primitive } from 'reka-ui';
     import { cn } from '@/lib/utils';
     import { reactiveOmit } from '@vueuse/core';
+    import { useAttrs } from 'vue';
 
     import { badgeVariants } from '.';
 
@@ -13,10 +14,14 @@
     });
 
     const delegatedProps = reactiveOmit(props, 'class');
+    const attrs = useAttrs();
 </script>
 
 <template>
-    <Primitive data-slot="badge" :class="cn(badgeVariants({ variant }), props.class)" v-bind="delegatedProps">
+    <Primitive
+        data-slot="badge"
+        :class="cn(badgeVariants({ variant }), props.class)"
+        v-bind="{ ...delegatedProps, ...attrs }">
         <slot />
     </Primitive>
 </template>
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 5ef9cf56..a8eab2bf 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -90,12 +90,9 @@
                                         <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
                                     </div>
                                     <div class="group-item__bottom">
-                                        <el-tag
-                                            size="small"
-                                            effect="plain"
-                                            :type="userFavoriteAvatarsStatusForFavTab(group.visibility)">
+                                        <Badge variant="outline">
                                             {{ formatVisibility(group.visibility) }}
-                                        </el-tag>
+                                        </Badge>
                                         <el-popover
                                             :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
                                             @update:visible="
@@ -507,6 +504,7 @@
 
     import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
     import { avatarRequest, favoriteRequest } from '../../api';
+    import { Badge } from '../../components/ui/badge';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
 
     import AvatarExportDialog from './dialogs/AvatarExportDialog.vue';
@@ -1499,16 +1497,6 @@
         }
     });
 
-    function userFavoriteAvatarsStatusForFavTab(visibility) {
-        if (visibility === 'public') {
-            return 'primary';
-        }
-        if (visibility === 'friends') {
-            return 'success';
-        }
-        return 'info';
-    }
-
     function formatVisibility(value) {
         if (!value) {
             return '';
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 83c04664..9779705b 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -92,12 +92,9 @@
                                         <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
                                     </div>
                                     <div class="group-item__bottom">
-                                        <el-tag
-                                            size="small"
-                                            effect="plain"
-                                            :type="userFavoriteFriendsStatusForFavTab(group.visibility)">
+                                        <Badge variant="outline">
                                             {{ formatVisibility(group.visibility) }}
-                                        </el-tag>
+                                        </Badge>
                                         <el-popover
                                             :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
                                             @update:visible="
@@ -290,6 +287,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
+    import { Badge } from '../../components/ui/badge';
     import { favoriteRequest } from '../../api';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
     import { userImage } from '../../shared/utils';
@@ -715,16 +713,6 @@
         });
     }
 
-    function userFavoriteFriendsStatusForFavTab(visibility) {
-        if (visibility === 'public') {
-            return 'primary';
-        }
-        if (visibility === 'friends') {
-            return 'success';
-        }
-        return 'info';
-    }
-
     function formatVisibility(value) {
         if (!value) {
             return '';
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index a79fdfb0..36603b68 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -92,12 +92,9 @@
                                         <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
                                     </div>
                                     <div class="group-item__bottom">
-                                        <el-tag
-                                            size="small"
-                                            effect="plain"
-                                            :type="userFavoriteWorldsStatusForFavTab(group.visibility)">
+                                        <Badge variant="outline">
                                             {{ formatVisibility(group.visibility) }}
-                                        </el-tag>
+                                        </Badge>
                                         <el-popover
                                             :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
                                             @update:visible="
@@ -416,6 +413,7 @@
 
     import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
     import { favoriteRequest, worldRequest } from '../../api';
+    import { Badge } from '../../components/ui/badge';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
 
     import FavoritesWorldItem from './components/FavoritesWorldItem.vue';
@@ -968,16 +966,6 @@
         getLocalWorldFavorites();
     }
 
-    function userFavoriteWorldsStatusForFavTab(visibility) {
-        if (visibility === 'public') {
-            return 'primary';
-        }
-        if (visibility === 'friends') {
-            return 'success';
-        }
-        return 'info';
-    }
-
     function changeWorldGroupVisibility(name, visibility, menuKey = null) {
         const params = {
             type: 'world',
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index 74adab8c..f7c8ceb7 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -44,91 +44,60 @@
                             v-text="currentInstanceWorld.ref.authorName"></span>
                     </div>
                     <div style="margin-top: 5px">
-                        <el-tag
-                            v-if="currentInstanceWorld.ref.$isLabs"
-                            type="primary"
-                            effect="plain"
-                            size="small"
-                            style="margin-right: 5px"
-                            >{{ t('dialog.world.tags.labs') }}</el-tag
-                        >
-                        <el-tag
+                        <Badge v-if="currentInstanceWorld.ref.$isLabs" variant="outline" style="margin-right: 5px">
+                            {{ t('dialog.world.tags.labs') }}
+                        </Badge>
+                        <Badge
                             v-else-if="currentInstanceWorld.ref.releaseStatus === 'public'"
-                            type="success"
-                            effect="plain"
-                            size="small"
-                            style="margin-right: 5px"
-                            >{{ t('dialog.world.tags.public') }}</el-tag
-                        >
-                        <el-tag
+                            variant="outline"
+                            style="margin-right: 5px">
+                            {{ t('dialog.world.tags.public') }}
+                        </Badge>
+                        <Badge
                             v-else-if="currentInstanceWorld.ref.releaseStatus === 'private'"
-                            type="danger"
-                            effect="plain"
-                            size="small"
-                            style="margin-right: 5px"
-                            >{{ t('dialog.world.tags.private') }}</el-tag
-                        >
+                            variant="outline"
+                            style="margin-right: 5px">
+                            {{ t('dialog.world.tags.private') }}
+                        </Badge>
                         <TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
-                            <el-tag
-                                class="x-tag-platform-pc"
-                                type="info"
-                                effect="plain"
-                                size="small"
-                                style="margin-right: 5px"
+                            <Badge class="x-tag-platform-pc" variant="outline" style="margin-right: 5px"
                                 ><i class="ri-computer-line"></i>
                                 <span
                                     v-if="currentInstanceWorld.bundleSizes['standalonewindows']"
                                     :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
                                     >{{ currentInstanceWorld.bundleSizes['standalonewindows'].fileSize }}</span
                                 >
-                            </el-tag>
+                            </Badge>
                         </TooltipWrapper>
                         <TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
-                            <el-tag
-                                class="x-tag-platform-quest"
-                                type="info"
-                                effect="plain"
-                                size="small"
-                                style="margin-right: 5px"
+                            <Badge class="x-tag-platform-quest" variant="outline" style="margin-right: 5px"
                                 ><i class="ri-android-line"></i>
                                 <span
                                     v-if="currentInstanceWorld.bundleSizes['android']"
                                     :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
                                     >{{ currentInstanceWorld.bundleSizes['android'].fileSize }}</span
                                 >
-                            </el-tag>
+                            </Badge>
                         </TooltipWrapper>
                         <TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
-                            <el-tag
-                                class="x-tag-platform-ios"
-                                type="info"
-                                effect="plain"
-                                size="small"
-                                style="margin-right: 5px"
+                            <Badge class="x-tag-platform-ios" variant="outline" style="margin-right: 5px"
                                 ><i class="ri-apple-line"></i>
                                 <span
                                     v-if="currentInstanceWorld.bundleSizes['ios']"
                                     :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
                                     >{{ currentInstanceWorld.bundleSizes['ios'].fileSize }}</span
                                 >
-                            </el-tag>
+                            </Badge>
                         </TooltipWrapper>
-                        <el-tag
+                        <Badge
                             v-if="currentInstanceWorld.avatarScalingDisabled"
-                            type="warning"
-                            effect="plain"
-                            size="small"
-                            style="margin-right: 5px; margin-top: 5px"
-                            >{{ t('dialog.world.tags.avatar_scaling_disabled') }}</el-tag
-                        >
-                        <el-tag
-                            v-if="currentInstanceWorld.inCache"
-                            type="info"
-                            effect="plain"
-                            size="small"
-                            style="margin-right: 5px">
+                            variant="outline"
+                            style="margin-right: 5px; margin-top: 5px">
+                            {{ t('dialog.world.tags.avatar_scaling_disabled') }}
+                        </Badge>
+                        <Badge v-if="currentInstanceWorld.inCache" variant="outline" style="margin-right: 5px">
                             <span>{{ currentInstanceWorld.cacheSize }} {{ t('dialog.world.tags.cache') }}</span>
-                        </el-tag>
+                        </Badge>
                     </div>
                     <div style="margin-top: 5px">
                         <LocationWorld :locationobject="currentInstanceLocation" :currentuserid="currentUser.id" />
@@ -215,6 +184,7 @@
         useWorldStore
     } from '../../stores';
     import { commaNumber, formatDateFilter } from '../../shared/utils';
+    import { Badge } from '../../components/ui/badge';
     import { DataTableLayout } from '../../components/ui/data-table';
     import { createColumns } from './columns.jsx';
     import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
diff --git a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
index 4dd0f705..2486c46f 100644
--- a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
+++ b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
@@ -28,16 +28,28 @@
             </el-button>
             <br />
             <h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
-            <el-tag
+            <Badge
                 v-for="user in chatboxUserBlacklist"
                 :key="user[0]"
-                type="info"
-                disable-transitions
-                style="margin-right: 5px; margin-top: 5px"
-                closable
-                @close="deleteChatboxUserBlacklist(user[0])">
+                variant="outline"
+                style="margin-right: 5px; margin-top: 5px">
                 <span>{{ user[1] }}</span>
-            </el-tag>
+                <button
+                    type="button"
+                    style="
+                        margin-left: 6px;
+                        border: none;
+                        background: transparent;
+                        padding: 0;
+                        display: inline-flex;
+                        align-items: center;
+                        color: inherit;
+                        cursor: pointer;
+                    "
+                    @click="deleteChatboxUserBlacklist(user[0])">
+                    <i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
+                </button>
+            </Badge>
         </div>
     </el-dialog>
 </template>
@@ -47,6 +59,7 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
+    import { Badge } from '../../../components/ui/badge';
     import { usePhotonStore } from '../../../stores';
 
     const { t } = useI18n();
@@ -64,7 +77,6 @@
 
     const emit = defineEmits(['deleteChatboxUserBlacklist']);
 
-
     function deleteChatboxUserBlacklist(userId) {
         emit('deleteChatboxUserBlacklist', userId);
     }
diff --git a/src/views/Settings/dialogs/LaunchOptionsDialog.vue b/src/views/Settings/dialogs/LaunchOptionsDialog.vue
index 88636103..5298fe4c 100644
--- a/src/views/Settings/dialogs/LaunchOptionsDialog.vue
+++ b/src/views/Settings/dialogs/LaunchOptionsDialog.vue
@@ -8,9 +8,9 @@
         <div style="font-size: 12px">
             {{ t('dialog.launch_options.description') }} <br />
             {{ t('dialog.launch_options.example') }}
-            <el-tag size="small"
+            <Badge variant="outline"
                 >--fps=144 --enable-debug-gui --enable-sdk-log-levels --enable-udon-debug-logging
-            </el-tag>
+            </Badge>
         </div>
 
         <el-input
@@ -59,6 +59,7 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
+    import { Badge } from '../../../components/ui/badge';
     import { openExternalLink } from '../../../shared/utils';
     import { useLaunchStore } from '../../../stores';
 
diff --git a/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue b/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
index daaad53b..f5e8c61e 100644
--- a/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
+++ b/src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
@@ -93,9 +93,9 @@
                 v-if="screenshotMetadataDialog.metadata.fileResolution"
                 style="margin-right: 5px"
                 v-text="screenshotMetadataDialog.metadata.fileResolution"></span>
-            <el-tag v-if="screenshotMetadataDialog.metadata.fileSize" type="info" effect="plain" size="small">{{
+            <Badge v-if="screenshotMetadataDialog.metadata.fileSize" variant="outline">{{
                 screenshotMetadataDialog.metadata.fileSize
-            }}</el-tag>
+            }}</Badge>
             <br />
             <Location
                 v-if="screenshotMetadataDialog.metadata.world"
@@ -163,6 +163,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { useGalleryStore, useUserStore, useVrcxStore } from '../../../stores';
+    import { Badge } from '../../../components/ui/badge';
     import { formatDateFilter } from '../../../shared/utils';
     import { vrcPlusImageRequest } from '../../../api';