diff --git a/.changeset/red-deers-happen.md b/.changeset/red-deers-happen.md
new file mode 100644
index 0000000000..13c688bea4
--- /dev/null
+++ b/.changeset/red-deers-happen.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix a bug where it was not possible to delete the username if it was optional.
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
index 56db3b4e22..0024f4d96c 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernamePage.tsx
@@ -1,5 +1,5 @@
 import { useWizard, Wizard } from '../../common';
-import { useCoreUser } from '../../contexts';
+import { useCoreUser, useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { handleError, useFormControl } from '../../utils';
@@ -7,6 +7,7 @@ import { UserProfileBreadcrumbs } from './UserProfileNavbar';
 
 export const UsernamePage = withCardStateProvider(() => {
   const user = useCoreUser();
+  const { userSettings } = useEnvironment();
   const card = useCardState();
   const wizard = useWizard();
   const usernameField = useFormControl('username', user.username || '', {
@@ -15,7 +16,10 @@ export const UsernamePage = withCardStateProvider(() => {
     placeholder: localizationKeys('formFieldInputPlaceholder__username'),
   });
 
-  const canSubmit = usernameField.value.length > 1 && user.username !== usernameField.value;
+  const isUsernameRequired = userSettings.attributes.username.required;
+
+  const canSubmit =
+    (isUsernameRequired ? usernameField.value.length > 1 : true) && user.username !== usernameField.value;
 
   const updatePassword = async () => {
     try {