diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue
index 52c2d9851b89ee3aeb6cc96558f6763749f3ace9..786a3dbafcb441027f300de8799963c807581d51 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue
@@ -13,6 +13,11 @@ export default {
       required: false,
       default: '',
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     qaSelector() {
@@ -23,12 +28,20 @@ export default {
 </script>
 
 <template>
+  <!-- 
+    // Once GlDropdownItem support a disabled state, the custom classes can be removed
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2092
+   -->
   <gl-dropdown-item
     is-check-item
     :is-checked="isChecked"
     :data-qa-selector="qaSelector"
+    :disabled="disabled"
+    :class="{ 'gl-pointer-events-none': disabled }"
     @click.native.capture.stop="$emit('click')"
   >
-    <slot>{{ text }}</slot>
+    <slot>
+      <span :class="{ 'gl-text-gray-600': disabled }">{{ text }}</span>
+    </slot>
   </gl-dropdown-item>
 </template>
diff --git a/ee/spec/frontend/security_dashboard/components/shared/filters/__snapshots__/filter_item_spec.js.snap b/ee/spec/frontend/security_dashboard/components/shared/filters/__snapshots__/filter_item_spec.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..4232c3e27c9243241762e3da3453fdcc59bf793f
--- /dev/null
+++ b/ee/spec/frontend/security_dashboard/components/shared/filters/__snapshots__/filter_item_spec.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter Item component disabled state renders the disabled dropdown item correctly 1`] = `
+<gl-dropdown-item-stub
+  avatarurl=""
+  class="gl-pointer-events-none"
+  data-qa-selector="filter_filter_dropdown"
+  disabled="true"
+  iconcolor=""
+  iconname=""
+  iconrightarialabel=""
+  iconrightname=""
+  ischeckitem="true"
+  secondarytext=""
+>
+  <span
+    class="gl-text-gray-600"
+  >
+    filter
+  </span>
+</gl-dropdown-item-stub>
+`;
diff --git a/ee/spec/frontend/security_dashboard/components/shared/filters/filter_item_spec.js b/ee/spec/frontend/security_dashboard/components/shared/filters/filter_item_spec.js
index 519fd368e745d40dcae733da2a211f39b109f66d..5c470021885ec0f003bcbbb666bdbf6b2546f56c 100644
--- a/ee/spec/frontend/security_dashboard/components/shared/filters/filter_item_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/shared/filters/filter_item_spec.js
@@ -37,6 +37,16 @@ describe('Filter Item component', () => {
     });
   });
 
+  describe('disabled state', () => {
+    beforeEach(() => {
+      createWrapper({ disabled: true });
+    });
+
+    it('renders the disabled dropdown item correctly', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
   it.each([true, false])('shows the expected checkmark when isSelected is %s', (isChecked) => {
     createWrapper({ isChecked });
     expect(dropdownItem().props('isChecked')).toBe(isChecked);