From 76024926e8b4d7b8aacf2bea0ee7c29a12a8ecff Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Mon, 16 Mar 2026 11:51:00 -0500
Subject: [PATCH 1/3] feat(ui): Disable invite button when over
 maxAllowedMemberships

---
 packages/localizations/src/en-US.ts           |  3 +-
 .../OrganizationProfile/MembersActions.tsx    | 57 +++++++++++++++----
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 95d14949135..d8d855dc008 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -1037,7 +1037,8 @@ export const enUS: LocalizationResource = {
     organization_domain_blocked: undefined,
     organization_domain_common: undefined,
     organization_domain_exists_for_enterprise_connection: undefined,
-    organization_membership_quota_exceeded: undefined,
+    organization_membership_quota_exceeded:
+      'You have reached your limit of organisation memberships, including outstanding invitations.',
     organization_minimum_permissions_needed: undefined,
     organization_not_found_or_unauthorized:
       'You are no longer a member of this organization. Please choose or create another one.',
diff --git a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
index c4fe5caf852..d1565036cd0 100644
--- a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
+++ b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
@@ -1,4 +1,7 @@
+import { useMemo } from 'react';
+import { useOrganization } from '@clerk/shared/react';
 import { Animated } from '@/ui/elements/Animated';
+import { Tooltip } from '@/ui/elements/Tooltip';
 
 import { useProtect } from '../../common';
 import { Button, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -11,6 +14,47 @@ type MembersActionsRowProps = {
 
 export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
   const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });
+  const { organization } = useOrganization();
+
+  const isBelowLimit = useMemo(() => {
+    if (!organization) {
+      return false;
+    }
+
+    if (organization.maxAllowedMemberships === 0) {
+      return true;
+    }
+
+    return organization.membersCount + organization.pendingInvitationsCount < organization.maxAllowedMemberships;
+  }, [organization]);
+
+  const inviteButton = (
+    <Button
+      elementDescriptor={descriptors.membersPageInviteButton}
+      aria-label='Invite'
+      localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+      isDisabled={!isBelowLimit}
+    />
+  );
+
+  let wrappedInviteButton;
+  if (isBelowLimit) {
+    wrappedInviteButton = (
+      <Action.Trigger
+        value='invite'
+        hideOnActive={!actionSlot}
+      >
+        {inviteButton}
+      </Action.Trigger>
+    );
+  } else {
+    wrappedInviteButton = (
+      <Tooltip.Root>
+        <Tooltip.Trigger>{inviteButton}</Tooltip.Trigger>
+        <Tooltip.Content text={localizationKeys('unstable__errors.organization_membership_quota_exceeded')} />
+      </Tooltip.Root>
+    );
+  }
 
   return (
     <Action.Root animate={false}>
@@ -25,18 +69,7 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
           gap={actionSlot ? 2 : undefined}
         >
           {actionSlot}
-          {canManageMemberships && (
-            <Action.Trigger
-              value='invite'
-              hideOnActive={!actionSlot}
-            >
-              <Button
-                elementDescriptor={descriptors.membersPageInviteButton}
-                aria-label='Invite'
-                localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
-              />
-            </Action.Trigger>
-          )}
+          {canManageMemberships && wrappedInviteButton}
         </Flex>
       </Animated>
       {canManageMemberships && (

From 326809d6676459e24422ccdf8467e5e1220e1227 Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Tue, 17 Mar 2026 10:08:09 -0500
Subject: [PATCH 2/3] fix(localizations): spelling

---
 packages/localizations/src/en-US.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index d8d855dc008..0ca2b521bfa 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -1038,7 +1038,7 @@ export const enUS: LocalizationResource = {
     organization_domain_common: undefined,
     organization_domain_exists_for_enterprise_connection: undefined,
     organization_membership_quota_exceeded:
-      'You have reached your limit of organisation memberships, including outstanding invitations.',
+      'You have reached your limit of organization memberships, including outstanding invitations.',
     organization_minimum_permissions_needed: undefined,
     organization_not_found_or_unauthorized:
       'You are no longer a member of this organization. Please choose or create another one.',

From c1b6e46e01264043baeed12808b3241e7ee577cd Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Tue, 17 Mar 2026 10:12:09 -0500
Subject: [PATCH 3/3] fix(ui): Add types and docs

---
 .../ui/src/components/OrganizationProfile/MembersActions.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
index d1565036cd0..bf7824ef1af 100644
--- a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
+++ b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import { useOrganization } from '@clerk/shared/react';
 import { Animated } from '@/ui/elements/Animated';
 import { Tooltip } from '@/ui/elements/Tooltip';
@@ -21,6 +21,7 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
       return false;
     }
 
+    // A value of 0 means unlimited memberships, thus the organization is always below the limit
     if (organization.maxAllowedMemberships === 0) {
       return true;
     }
@@ -37,7 +38,7 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
     />
   );
 
-  let wrappedInviteButton;
+  let wrappedInviteButton: ReactNode;
   if (isBelowLimit) {
     wrappedInviteButton = (
       <Action.Trigger