diff --git a/libs/components/src/form-field/form-field.stories.ts b/libs/components/src/form-field/form-field.stories.ts
index 96cacb97645..d1d00c59175 100644
--- a/libs/components/src/form-field/form-field.stories.ts
+++ b/libs/components/src/form-field/form-field.stories.ts
@@ -180,6 +180,27 @@ const ButtonGroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCom
 export const ButtonInputGroup = ButtonGroupTemplate.bind({});
 ButtonInputGroup.args = {};
 
+const DisabledButtonInputGroupTemplate: Story<BitFormFieldComponent> = (
+  args: BitFormFieldComponent
+) => ({
+  props: args,
+  template: `
+    <bit-form-field>
+      <bit-label>Label</bit-label>
+      <input bitInput placeholder="Placeholder" disabled />
+      <button bitSuffix bitButton disabled>
+        <i aria-hidden="true" class="bwi bwi-lg bwi-eye"></i>
+      </button>
+      <button bitSuffix bitButton>
+        <i aria-hidden="true" class="bwi bwi-lg bwi-clone"></i>
+      </button>
+    </bit-form-field>
+  `,
+});
+
+export const DisabledButtonInputGroup = DisabledButtonInputGroupTemplate.bind({});
+DisabledButtonInputGroup.args = {};
+
 const SelectTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
   props: args,
   template: `
diff --git a/libs/components/src/form-field/prefix.directive.ts b/libs/components/src/form-field/prefix.directive.ts
index 010dbc056e5..edf600d4e7f 100644
--- a/libs/components/src/form-field/prefix.directive.ts
+++ b/libs/components/src/form-field/prefix.directive.ts
@@ -10,6 +10,8 @@ export const PrefixClasses = [
   "tw-border-secondary-500",
   "tw-text-muted",
   "tw-rounded-none",
+  "disabled:!tw-text-muted",
+  "disabled:tw-border-secondary-500",
 ];
 
 @Directive({