diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 95d14949135..0ca2b521bfa 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 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.',
diff --git a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
index c4fe5caf852..bf7824ef1af 100644
--- a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
+++ b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
@@ -1,4 +1,7 @@
+import { useMemo, type ReactNode } 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,48 @@ 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;
+ }
+
+ // A value of 0 means unlimited memberships, thus the organization is always below the limit
+ if (organization.maxAllowedMemberships === 0) {
+ return true;
+ }
+
+ return organization.membersCount + organization.pendingInvitationsCount < organization.maxAllowedMemberships;
+ }, [organization]);
+
+ const inviteButton = (
+
+ );
+
+ let wrappedInviteButton: ReactNode;
+ if (isBelowLimit) {
+ wrappedInviteButton = (
+
+ {inviteButton}
+
+ );
+ } else {
+ wrappedInviteButton = (
+
+ {inviteButton}
+
+
+ );
+ }
return (
@@ -25,18 +70,7 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
gap={actionSlot ? 2 : undefined}
>
{actionSlot}
- {canManageMemberships && (
-
-
-
- )}
+ {canManageMemberships && wrappedInviteButton}
{canManageMemberships && (