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>
-                <i v-if="modelValue" :class="modelValue"></i>
-                <span>{{ t('nav_menu.icon_picker.pick_icon') }}</span>
-            </el-button>
+            <Button>
+                {{ t('nav_menu.icon_picker.pick_icon') }}
+            </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>
-            <el-button type="primary" @click="saveSetAvatarStylesDialog">
+            <Button variant="secondary" @click="closeSetAvatarStylesDialog">{{
+                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
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                <Button
+                    variant="outline"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="deleteFavoriteNoConfirm(favoriteDialog.objectId)">
-                    <el-icon style="margin-right: 5px"><Check /></el-icon>
-                    {{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
+                    <Check />{{ 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>
-                    {{ group }} ({{ localWorldFavGroupLength(group) }})
-                </el-button>
-                <el-button
+                    <Check />{{ group }} ({{ localWorldFavGroupLength(group) }})
+                </Button>
+                <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>
-                    {{ group }} ({{ localAvatarFavGroupLength(group) }})
-                </el-button>
-                <el-button
+                    <Check />{{ group }} ({{ localAvatarFavGroupLength(group) }})
+                </Button>
+                <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>
-            <el-button type="primary" @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
+            </Button>
+            <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>
-            <el-button
-                size="small"
+            }}</Button>
+            <Button
+                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
-                size="small"
+            <Button
+                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">{{
-                t('dialog.invite.invite_with_message')
-            }}</el-button>
-            <el-button
-                type="primary"
+            <Button
+                variant="secondary"
+                class="mr-2"
                 :disabled="inviteDialog.loading || !inviteDialog.userIds.length"
-                @click="sendInvite"
-                >{{ t('dialog.invite.invite') }}</el-button
+                @click="showSendInviteDialog"
+                >{{ 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
-                        size="small"
-                        :icon="CopyDocument"
-                        style="margin-left: 5px"
-                        circle
-                        @click="copyInstanceMessage(launchDialog.url)" />
+                    <Button
+                        class="rounded-full ml-1"
+                        size="icon-sm"
+                        variant="ghost"
+                        @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>
-                    <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
-                        <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
-                    </TooltipWrapper>
+                    <div class="flex items-center">
+                        <span>{{ t('dialog.launch.short_url') }}</span>
+                        <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
+                            <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
-                        size="small"
-                        :icon="CopyDocument"
-                        style="display: inline-block; margin-left: 5px"
-                        circle
-                        @click="copyInstanceMessage(launchDialog.shortUrl)" />
+                    <Button
+                        class="rounded-full ml-1"
+                        size="icon-sm"
+                        variant="ghost"
+                        @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
-                        size="small"
-                        :icon="CopyDocument"
-                        style="display: inline-block; margin-left: 5px"
-                        circle
-                        @click="copyInstanceMessage(launchDialog.location)" />
+                    <Button
+                        class="rounded-full ml-1"
+                        size="icon-sm"
+                        variant="ghost"
+                        @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
-                type="primary"
+            <Button
                 :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>
-            <el-button size="small" @click="closeDialog">{{ t('dialog.boop_dialog.cancel') }}</el-button>
-            <el-button size="small" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
+            <Button size="sm" variant="outline" class="mr-2" @click="showGalleryPage">{{
+                t('dialog.boop_dialog.emoji_manager')
+            }}</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>
-                <el-button type="primary" @click="saveChanges"> Confirm </el-button>
+                <Button variant="secondary" @click="cancel">Cancel</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
-                    type="warning"
-                    :icon="StarFilled"
-                    size="large"
-                    circle
-                    @click="userDialogCommand('Add Favorite')"></el-button>
+                <Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
             </TooltipWrapper>
             <TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
-                <el-button
-                    type="default"
-                    :icon="Star"
-                    size="large"
-                    circle
-                    @click="userDialogCommand('Add Favorite')"></el-button>
+                <Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
+                    ><Star
+                /></Button>
             </TooltipWrapper>
         </template>
         <DropdownMenu>
             <DropdownMenuTrigger as-child>
-                <el-button
-                    :type="
-                        userDialog.incomingRequest || userDialog.outgoingRequest
-                            ? 'success'
-                            : userDialog.isBlock || userDialog.isMute
-                              ? 'danger'
-                              : 'default'
-                    "
-                    :icon="MoreFilled"
-                    size="large"
-                    circle
-                    style="margin-left: 5px"></el-button>
+                <div class="ml-2">
+                    <Button variant="outline" size="icon-lg" class="rounded-full">
+                        <Ellipsis />
+                        <span
+                            v-if="dotClass"
+                            class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-background"
+                            :class="dotClass" />
+                    </Button>
+                </div>
             </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>
-            <el-button
+            </Button>
+            <Button
+                variant="default"
                 v-if="VRCXUpdateDialog.release !== pendingVRCXInstall"
                 :disabled="updateInProgress"
-                type="primary"
                 @click="installVRCXUpdate">
                 {{ t('dialog.vrcx_updater.download') }}
-            </el-button>
-            <el-button v-if="!updateInProgress && pendingVRCXInstall" type="primary" @click="restartVRCX(true)">
+            </Button>
+            <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>
-                <el-button type="primary" @click="saveSetWorldTagsDialog">
+                </Button>
+                <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";