diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a86d43c676..236bcb7c7e 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -103,7 +103,7 @@
   let settingsDefinition
   let settingsDefinitionMap
   let missingRequiredSettings = false
-  let invalidSettings = false
+  let componentErrors = false
 
   // Temporary styles which can be added in the app preview for things like
   // DND. We clear these whenever a new instance is received.
@@ -138,12 +138,12 @@
 
   // Derive definition properties which can all be optional, so need to be
   // coerced to booleans
-  $: invalidSettings = instance?._meta?.errors
+  $: componentErrors = instance?._meta?.errors
   $: hasChildren = !!definition?.hasChildren
   $: showEmptyState = definition?.showEmptyState !== false
   $: hasMissingRequiredSettings = missingRequiredSettings?.length > 0
   $: editable = !!definition?.editable && !hasMissingRequiredSettings
-  $: hasInvalidSettings = invalidSettings?.length > 0
+  $: hasComponentErrors = componentErrors?.length > 0
   $: requiredAncestors = definition?.requiredAncestors || []
   $: missingRequiredAncestors = requiredAncestors.filter(
     ancestor => !$component.ancestors.includes(`${BudibasePrefix}${ancestor}`)
@@ -152,7 +152,7 @@
   $: errorState =
     hasMissingRequiredSettings ||
     hasMissingRequiredAncestors ||
-    hasInvalidSettings
+    hasComponentErrors
 
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
@@ -698,7 +698,7 @@
       <ComponentErrorState
         {missingRequiredSettings}
         {missingRequiredAncestors}
-        {invalidSettings}
+        {componentErrors}
       />
     {:else}
       <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
diff --git a/packages/client/src/components/error-states/ComponentErrorState.svelte b/packages/client/src/components/error-states/ComponentErrorState.svelte
index 8cf1ad6dfb..9eace07018 100644
--- a/packages/client/src/components/error-states/ComponentErrorState.svelte
+++ b/packages/client/src/components/error-states/ComponentErrorState.svelte
@@ -8,7 +8,7 @@
     | { key: string; label: string }[]
     | undefined
   export let missingRequiredAncestors: string[] | undefined
-  export let invalidSettings: string[] | undefined
+  export let componentErrors: string[] | undefined
 
   const component = getContext("component")
   const { styleable, builderStore } = getContext("sdk")
@@ -16,7 +16,7 @@
   $: styles = { ...$component.styles, normal: {}, custom: null, empty: true }
   $: requiredSetting = missingRequiredSettings?.[0]
   $: requiredAncestor = missingRequiredAncestors?.[0]
-  $: invalidSetting = invalidSettings?.[0]
+  $: errorMessage = componentErrors?.[0]
 </script>
 
 {#if $builderStore.inBuilder}
@@ -25,8 +25,8 @@
       <Icon name="Alert" color="var(--spectrum-global-color-static-red-600)" />
       {#if requiredAncestor}
         <MissingRequiredAncestor {requiredAncestor} />
-      {:else if invalidSetting}
-        {invalidSetting}
+      {:else if errorMessage}
+        {errorMessage}
       {:else if requiredSetting}
         <MissingRequiredSetting {requiredSetting} />
       {/if}