diff --git a/src/components/confirm-dialog.tsx b/src/components/confirm-dialog.tsx
index ade8ecc..a31f9be 100644
--- a/src/components/confirm-dialog.tsx
+++ b/src/components/confirm-dialog.tsx
@@ -42,7 +42,7 @@ export function ConfirmDialog({
           <AlertDialogCancel>取消</AlertDialogCancel>
           <AlertDialogAction
             disabled={busy}
-            className={destructive ? 'bg-destructive text-white hover:bg-destructive/90' : undefined}
+            variant={destructive ? 'destructive' : 'default'}
             onClick={async (event) => {
               event.preventDefault()
               setBusy(true)
diff --git a/src/routes/_authed/users/index.tsx b/src/routes/_authed/users/index.tsx
index 65f7a43..fb15300 100644
--- a/src/routes/_authed/users/index.tsx
+++ b/src/routes/_authed/users/index.tsx
@@ -364,7 +364,7 @@ function UsersPage() {
           <AlertDialogFooter>
             <AlertDialogCancel onClick={() => setTogglingUser(null)}>取消</AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-white hover:bg-destructive/90"
+              variant="destructive"
               onClick={() => {
                 if (togglingUser) {
                   void handleStatusToggle(togglingUser.user, false)